*注：本篇观点来自https://blog.csdn.net/xcymorningsun/java/article/details/53432913

 

　　首先，div是块级元素，标准流中的div在页面中独占一行

 

 

 

　　 浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

　　假如让2浮动起来，他就会脱离标准流，所有3会向上移动，占据2的位置

 

 

 　   可以看出3变短了，2挡住了一部分3，此时的2不属于标准流，1，3，4竖直排列

 

　　这里2的浮动用的是左浮动（float: left;），这里的靠左、靠右是说页面的左、右边缘。

 

　　如果2采用右浮动

 

 

 　　如果让1和2都左浮

 

 

　　 可以看出1和2连在一起，这里也可以看出：

　　假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

       div的顺序是HTML代码中div的顺序决定的。

       靠近页面边缘的一端是前，远离页面边缘的一端是后。

　　为了方便理解可以使2，3，4全部浮起来，如图：

 

 　　这样1属于标准流，2紧跟1，且垂直排列，3，4紧跟2，且横向排列，由于是左排列，所以2排在左边第一位，3，4顺位。

　　

　　如果把2，3，4设为右排列，即

 

　　综上，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。

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

       清除浮动的关键字是clear，官方定义如下：

　　语法：

       clear : none | left | right | both

       取值：

       none  :  默认值。允许两边都可以有浮动对象

       left   :  不允许左边有浮动对象

       right  :  不允许右边有浮动对象

       both  :  不允许有浮动对象

　　定义太模糊，举几个例子来进一步说明

　　假如只有1，2左浮

 

 　　1和2会并排横向排列，但是如果在他们浮动的前提下又不让他们横向排列，就可以用到clear,想让上图变成这样

 

 　　可能有人想到清除1右边的元素，即（clear：right）但是如果这么写根本没有效果，因为clear只会影响使用清除的元素本身，不能影响其他元素。

　　也就是说如果想让1和2竖直排列，如果想让2移动但是在1中使用了移动样式，这是没有用的，因为他只能影响1，所以解决办法就是在2的css样式中使用clear:left；来指定div2元素左边不允许出现浮动元素，这样div2就*下移一行。

　　

　　当然假设1和2都是右浮，同理，在2的css样式中使用clear:right;