浮动：float: left | right | none；

1.浮动的应用场所：浮动可以解决元素横排的问题，同时浮动布局在网页缩放过程中，会保留原有的的布局结构（模块横向排列）。

   float:left;   左浮

   float:right;  右浮

注意：元素一旦浮动就会脱离文档流（不占位，漂浮）。

2.元素浮动造成的影响：

（1）、浮动的元素会覆盖正常的元素。如图：

两个div正常情况下：                                                   给下面的小div添加浮动后：覆盖正常的div

                                               

（2）对于没有设置固定高度的父元素，给子元素添加浮动时，父元素的高度会塌陷（只对没有设设置高度的父元素有影响）。例如：

 效果如图：父元素高度塌陷了，视觉上边框只是一条线，子元素在外面。

所以我们大多数在用到float布局时，一般会给固定高度：给box1添加 300px的高度

（3）元素浮动后，文字会对其产生环绕效果（一边会用在图文混排那种布局上）。例如： 

 3、解决方法：清除浮动

(1）增加挡板元素：挡住要被覆盖的元素。

在被要覆盖的元素前，增加一个挡板元素（div），如：

（2）给浮动元素的父元素清除浮动（有bug）

       

注意：

用这个方法会导致子元素溢出父元素的部分，被裁割掉。（bug）

（3）万能清（兼容好，无bug）

给父元素添加后置操作，如：