css 设置浮动和清除浮动

http://www.divcss5.com/jiqiao/j406.shtml

https://my.oschina.net/leipeng/blog/221125

首先更正一点clear不是一个标签,它是css中的一个属性。
其属性值有四个clear:both|left|right|none;
简单来说呢,clear属性的作用就是“清除”浮动。
如果某元素设置clear:left;表示该元素左边不存在浮动元素
相应的,clear:right;表示该元素右边不存在浮动元素;clear:both;表示该元素两边都不存浮动元素。clear:none表示两边允许有浮动元素。

在视觉上要使某元素左边或右边不存在浮动元素,就只有它往下移一行,或浮动元素往下移一行。(这个元素肯定是不能将浮动元素清除的了,只是用这样的方式达到页面布局的效果而已)
其中的浮动元素就是设置了float属性的元素。 

clear:left|right|both都会用到
不知道你有没有碰到过这种情况:
四个div,想让它们显示成两行,我一般会这么做
<div style="float:left;"></div><div style="float:left;"></div>
<div style="float:left;clear:left;"></div><div style="float:left;"></div>
或者
<div style="float:left;"></div><div style="float:left;clear:right;"></div>
<div style="float:left;"></div><div style="float:left;"></div>

css

相关推荐