浮动和清除浮动 float clear

发现一个写的很不错的blog
http://www.cnblogs.com/jiqing9006/

首先,大家知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的

如下图:浮动和清除浮动 float clear_第1张图片
即使div1的宽度很小,div2也不会排在div1后面,因为div元素是独占一行的。
布局的基本出发点是:

如何在一行显示多个div元素

这就要用到浮动
浮动可以理解为:让某个div元素脱离标准流,但div1,div3,div4仍然在标准流中,所以div3会自动向上移动,占据div2的位置,重新组成一个流。
如图:浮动和清除浮动 float clear_第2张图片

图中,由于对div2设置浮动,因此它不再属于标准流,div3自动上移顶替div2的位置,div1,div3,div4依次排列,成为一个新的流。又因为浮动是漂浮在标准流之上的,因此div2挡住了一部分div3,div3看起来变“矮”了。
这里div2用的是左浮动(float:left),可以理解为漂浮起来后靠左排列,右浮动(float:right;)则是靠右排列。这里的左右说的是父元素的左右边缘。如果div采用右浮动,则有如下效果:
浮动和清除浮动 float clear_第3张图片
此时div2靠右边排列,不再遮挡div3.

浮动多个元素

我们把div2,div3都加上左浮动,如图:
浮动和清除浮动 float clear_第4张图片
同理,由于div2,div3浮动,它们不再属于标准流,因此div4会自动上移,与div1组成一个“新”标准流,而浮动是漂浮在标准流之上,因此div2又挡住了div4.
所以,当同时对div2,div3设置浮动之后,div3会跟随在div2后面,但是,div2在每个例子中都是浮动的,却并没有跟随到div1之后。因此:
假如某个div元素A是浮动的,如果A元素上一个元素也浮动的话,那么A元素就会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行),如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。
再举几个栗子。
把div2,div3,div4都设置成左浮动,效果如下:
浮动和清除浮动 float clear_第5张图片

把div2,div3,div4都设置成右浮动,效果如下:
这里写图片描述
把div2,div4左浮动,效果如下:
浮动和清除浮动 float clear_第6张图片

清除浮动

块级元素浮动之前,在标准流中是竖向排列的,而浮动之后,块级元素可以理解成横向排列。

清除浮动可以理解为打破横向排列。

clear:none | left | right | both
取值:
none:默认值,允许两边都可以有浮动对象。
left:不允许左边有浮动对象
right:不允许右边有浮动对象
both:不允许有浮动对象
定义描述的真是抽象
根据上边的基础,假如页面中只有2个元素div1,div2,它们都是左浮动,如下:
这里写图片描述
此时div1,div2都浮动,根据规则,div2会排在div1后面,但我们仍然希望div2能排在div1下面,就像div1没有浮动,div2左浮动那样。
这是就要用到clear

对于css的清除浮动,一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。

要让div2下移,就必须在div2的css样式中使用浮动,本例中div2的左边有浮动元素div1,因此只要在div2的css样式中使用clear:left;来指定div2元素左边不允许出现浮动元素,这样div2就被迫下移一行。
浮动和清除浮动 float clear_第7张图片
那么假如玉面中只有2个元素div1,div2,它们都是右浮动呢?
浮动和清除浮动 float clear_第8张图片
如果要让div2下移到div1下边,要?
我们希望移动div2,就必须在div2的css样式中调用浮动,因为浮动只能影响调用它的元素。
可以看出div2的右边有一个浮动元素div1,那么我们可以在div2的css样式中使用clear:right;来指定div2的右边不允许出现浮动元素,这样div2就被迫下移一行,移到div1下边。
浮动和清除浮动 float clear_第9张图片

原文链接:经验分享:CSS浮动(float,clear)通俗讲解 太棒了,清晰明了

你可能感兴趣的:(前端,css,浮动,清除浮动)