一、浮动产生的原因（为什么会产生浮动）
首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。
GTXEA{8%A7E}LY(9%4D4{HX.png
就像这样，可以看出，即使div1的宽度再小，div2也不会和div1共同合并成一行，而是单独成立一行。因为div元素是单独占一行的。
所以在布局的时候，无论多么复杂的布局，都是建立在“如何在一行内显示多个div”的基础上的。而以上这些理论，是指标准流中的div。一行中显示多个div，标准流已经不满足要求了，所以我们就要跳出标准流。这就用到了浮动。
而对于浮动的理解，大体上是：让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
比如说：设置让上面的div2浮动，这样他就会脱离标准流，但是1,3,4都还在标准流之中。所以div3会向上补全，占据div2的位置，这样就形成了一个新的标准流。
(78(BQ@%{RZ}J3)WAKTBTCV.png
这里面div2设置的是左浮动，即float:left;意思是漂浮之后向左排列，如果设置为float:right;那么就会出现以下的情况。
7T8FW~DS${358AT3VF{HHXW.png
同理，由于div2、div3浮动，它们不再属于标准流，因此div4会自动上移，与div1组成一个“新”标准流，而浮动是漂浮在标准流之上，因此div2又挡住了div4。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
举个例子：
假如我们把div2，div3，div4都设为左浮动，效果如下：
![3S%]F%LCS9)@1ZL8MQ_%~B.png
我们来一个一个分析：
先从div4开始分析，它发现div3是浮动的，由于它自己也是浮动的，那么它就跟随在div3的后面，div3发现div2是浮动的，所以就跟在div2的后面，而div2发现div1在标准流之中，那么div2就垂直在div1的下面，就形成了这幅图。
如果我们只把div2和div4设成浮动的，那就会出现下图这样：
$6~0E0}TS4C(@P9EC0_90HW.png
div3向上，被div2遮住了。
经过上边的学习，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。
清除浮动
清除浮动可以理解为打破横向排列。
清除浮动的关键字是clear：
语法： clear : none | left | right | both
取值： none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
假如页面中只有两个元素div1、div2，它们都是左浮动:
![Q(AXECX2EHOH]]V$NTH~@FH.png](https://img.haomeiwen.com/i6358919/b6764d8cc0fb45e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但我们仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。
这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。其实这种理解是不正确的，这样做没有任何效果。
怎么理解呢？就拿上边的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在div1中调用的，它只能影响div1，不能影响div2。要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。
要想下移div2，就要操作div2，不能操作div1
网友评论