宽度 main:600;div1:200;div2:150;div3:250;div4:180;
<div id="main">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</div>
该图中的div1和div3是标准流(即没有设置float),div2和div4为流动流(float:left)
没有设置float属性(默认为none)的div称标准流(如:div1和div3),设置float的属性为left或right的div称为浮动流(如:div2和div4浮在标准流的上面)。
浮动流位于标准流的上层,会遮住写在其后的标准流(如:div2遮住了标准流div3,但不会遮住写在其前面的标准流div1)。浮动流的顶端紧贴着写在其前面最近标准流的底端(如div2贴着div1的底端,div4贴着div3的底端)。
外层的div高度等于其内的标准流div高度之和(如:main=div1+div3)。
#div1{float:none} #div2,#div3,#div4{float:left}
浮动流会尽可能向上浮动,以容纳之。
补充:
1、float元素的高度是由其内容来决定的。无论它里的元素是标准文档流还是浮动流。
2、将一个元素设为float后,其标准文档流的父容器会塌陷,但如果其父容器也是浮动流的话,则不会塌陷。
3、清除浮动只会对同级别的元素产生影响,但不会清除其父辈的浮动