如果你喜欢用浮动来进行布局，我深信，你肯定受过浮动带来的虐心。尽管我记得在张鑫旭大哥的某篇博文里看到过，浮动，其实并不是作为一种布局的手段，然后balabala，确实言之很有理。我也曾经这么认为，我现在也是这么认为的。不过，原则上，我们应该可以有这么个底线，好用并且有完美解决问题的方法，就有存在的理由。浮动是我们在写css不可避免的。

　　一、我们为什么要清除浮动

　　因为一个元素浮动之后就会脱离文档流，这样使得包含它的父元素并不会因为这个浮动元素的存在而自动撑起高度，此曰”高度塌陷“。

　　与此同时，一个元素设置了浮动后，会影响它的兄弟元素，具体的影响还要看兄弟元素是块级元素还是内联级元素。若块级元素辉无视这个浮动元素，导致浮动元素被覆盖，除非这些div设置了宽度，并且父元素的宽度足以包含它们，这样兄弟元素才会被强制换行；若为内联级元素，则尽可能围绕浮动元素。

　　二、清除浮动的方法

　　1.clear:both ---在此不再展开

　　2.空div方法

<div class="box">    <div class="main left">设置左浮动 float: left</div>    <div style="clear: both;"></div>    <div class="aside">我是用来看效果的</div></div>

　　3.overflow方法

　　在浮动元素的夫元素上设置了overflow的值为hidden或auto，可以闭合浮动。而在ie6中还需要触发haslayout，例如为父元素设置容器宽度或者设置zoom:1

<div class="box" style="overflow: hidden; *zoom: 1;">    <div class="main left">设置左浮动 float: left</div>    <div class="aside left">也设置了左浮动。</div></div>

　　4.使用after伪元素

　　注意是伪元素，不是伪类，伪元素代表一个元素之后最近的元素。这种方法可以完美兼容当前主流的各大浏览器。但是在IE下，我们需要IEhack，这里用到的IEhack就是触发haslayout。

<style>    .clearfix {/* 触发 hasLayout */ zoom: 1; }    .clearfix:after {content: &quot;.&quot;; display: block; height: 0; clear: both; visibility: hidden; }</style><div class="box clearfix">    <div class="main left">设置左浮动 float: left</div>    <div class="aside left">也设置了左浮动。</div></div>

　　三、清除浮动方法的实质----css的clear与BFC特性

　　通过上面的例子，我们不难发现清除浮动的方法可以分成两类：

　　一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

　　二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，关于这一点，下面 Kayo 为大家进行详细的介绍。

　　BFC 在 CSS 的可视化格式模型 (Visual Formatting Model) 中具有非常重要的地位，很多开发者因为不了解 BFC 的特性而在实际开发中产生很多让人感到莫名其妙的问题。尽管如此，因为 BFC 涉及 CSS 中很少接触的部分，因此国内的相关介绍很少，这里 Kayo 展开说明一下。

　　1.BFC 是什么？

　　BFC (Block Formatting Contexts) 即块级格式化上下文，从样式上看，它与普通的容器没有什么区别，但是从功能上，BFC 可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素，上面的第二类方法（如 overflow 方法）就是触发了父元素的 BFC ，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。

　　2.如何触发 BFC

　　触发 BFC 的条件如下：

• 浮动元素，float 除 none 以外的值
• 绝对定位元素，position（absolute，fixed）
• display 为以下其中之一的值 inline-blocks，table-cells，table-captions
• overflow 除了 visible 以外的值（hidden，auto，scroll）

　　在 CSS3 中，BFC 叫做 Flow Root，并增加了一些触发条件：

• display 的 table-caption 值
• position 的 fixed 值，其实 fixed 是 absolute 的一个子类，因此在 CSS2.1 中使用这个值也会触发 BFC ，只是在 CSS3 中更加明确了这一点。

　　3.BFC 的特性

　　BFC 主要有三个特性：

　　(1) BFC 会阻止外边距折叠

　　两个相连的 div 在垂直上的外边距会发生叠加，有些书籍会把这个情况列作 bug ，这里 Kayo 并不同意，这种折叠虽然会给不熟悉 CSS 布局的开发者带来一些不便，但实际上它具有完整且具体的折叠规则，并且在主流浏览器中都存在，因此 Kayo 更认为这应该是 CSS 的特性。当然，在实际开发中，或许我们有时会不需要这种折叠，这时可以利用 BFC 的其中一个特性——阻止外边距叠加。

　　(2) BFC 可以包含浮动的元素

　　这也正是上面使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理，使用 overflow: hidden 或 overflow: auto 触发浮动元素父元素的 BFC 特性，从而可以包含浮动元素，闭合浮动。

　　W3C 的原文是“‘Auto‘ heights for block formatting context roots”，也就是 BFC 会根据子元素的情况自动适应高度，即使其子元素中包括浮动元素。

但是 IE6-7 并不支持 W3C 的 BFC ，而是使用自产的 hasLayout 。从表现上来说，它跟 BFC 很相似，只是 hasLayout 自身存在很多问题，导致了 IE6-7 中一系列的 bug 。触发 hasLayout 的条件与触发 BFC 有些相似，具体情况 Kayo 会另写文章介绍。这里 Kayo 推荐为元素设置 IE 特有的 CSS 属性 zoom: 1 触发 hasLayout ，zoom 用于设置或检索元素的缩放比例，值为“1”即使用元素的实际尺寸，使用 zoom: 1 既可以触发 hasLayout 又不会对元素造成其他影响，相对来说会更为方便。

　　(3) BFC 可以阻止元素被浮动元素覆盖

　　如上面所说，浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发 BFC 后可以阻止这种情况的发生。

为了说明 BFC 对于清除浮动的本质，Kayo 在这里使用了较大的篇幅介绍了 BFC ，但 BFC 并不是本文要说明的中心，并且 BFC 的机制也相当复杂，因此 Kayo 会基于以上 BFC 的内容另写一篇更详细的文章介绍 BFC ，并制作 Demo 说明实际情况。

　　三.清除浮动的更多方法　　

　　在了解了清除浮动的实际原理后，我们不难想象，清除浮动的方法并不只上面提到的三种，例如，利用 BFC 特性，还可以使用以下的方法触发 BFC 并清除浮动。

　　给浮动元素的父元素添加浮动，但是这样需要一直浮动到 body ，不建议采取该方法。

　　给浮动元素的父元素添加 display: table-cells ，但是这样无疑改变了盒子模型，也不建议使用。

　　可以看出，以上这些方法虽然也比较方便，但同时也有很明显的缺点，这也导致了上面三种方法会更加适合实际项目中使用。

　　结合语义化的要求，在实际的项目中，Kayo 建议可以使用 overflow 方法或 :after 伪元素方法。使用 overflow 方法，较为方便，在如内部元素全部为浮动元素，并且内容不会超出父元素框等情况可以直接采用 overflow 方法，但该方法毕竟会触发 BFC ，上面已经提到，BFC 的特性是有多个的，为了避免不必要的影响，如果实际需要清除浮动元素的布局比较复杂，可以直接采用 :after 伪元素方法。

　　　本文转自：http://kayosite.com/remove-floating-style-in-detail.html (自清除浮动的方法直接转载，头部被我加工) 如有转载，请尊重原作者，注明文章出处，thx