<h2>浮动到底是什么？</h2>

<p>浮动核心就一句话：<strong>浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素</strong>。请默念3次！</p>

<p>浮动最初设计的目的并没那么多事儿，就只是用来实现文字环绕效果而已，如下所示：
</p><div class="image-package">

<img src="https://img.haomeiwen.com/i1158202/27ac63a8ae142d04.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">文字环绕效果</div>

</div>

<h2>为什么要清除浮动</h2>
浮动:元素使用浮动之后会脱离文档流，左右移动直到浮动元素的外边缘碰到到他的父元素的边框或者碰到另一个浮动元素的边框，浮动的这个性质会影响网页的布局，例如：
造成父元素的高度塌陷
[图片上传中。。。（1）]
当包含左列和右列的父元素的高度小于浮动的子元素时,父元素的高度没有被撑开。

影响块级元素中的文本

对于黄色div来说，浮动的粉色div是不影响他的布局的，黄色div就像不存在粉色div一样呈现自己的布局，但是对于黄色div中的文字来说受到了浮动元素的影响。

因为浮动会造成以上之类的布局问题,所以在使用float之后,我们要清除浮动。
清除浮动的几种方法
父元素也设置float:left。

这种方式比较简单,但是作为父容器来说设置了float同样会影响他相邻元素的布局,所以这种方法并不可取。

浮动元素后面加一个任何标签然后样式设置clear:both;
<div id="content"> <div class="left">左列,设置float:left</div> <div class="right">右列,设置float:left</div> <div class="clear"></div></div>

content{ width:1000px; background:#ddd; border:3px solid red; } .left{ float:left; width:300px; height:60px; background:pink; } .right{ float:left; width:300px; height:60px; background:yellow; } .clear{ clear:both; }

效果图:

这种方式同样是比较简单，但是缺点是增加了许多无意义的标签，不利于维护。

浮动元素后面加一个<br clear="all" />
该方法与上一个浮动元素后面加一个任何标签然后样式设置clear:both类似,也产生无语义化的标签。

包裹浮动元素的父元素使用overflow:hidden和overflow:auto

content{ width:1000px; background:#ddd; border:3px solid red; overflow:hidden; //overflow:auto; *zoom:1;//IE6中出发hasLayout }

这种方法的优点是不存在语义化的问题，缺点是一些情况下可能会产生滚动条或者内容被隐藏了。

使用after伪元素

content:after{ content:""; display:block; clear:both; }

IE6中不支持after,可以使用

content{ *zoom:1;//出发hasLayout }

这是目前采取的最常用的一种方法,相比以上有缺陷的几种做法,使用伪元素after比较保险。