CSS---float

宽度  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、清除浮动只会对同级别的元素产生影响,但不会清除其父辈的浮动

原文地址:https://www.cnblogs.com/beast-king/p/3687266.html