引言 - float 有哪些特性
破坏性
float 破坏了父标签的原本结构，使父标签出现了塌陷现象。导致这一现象的最根本原因在于：被设置了 float 的元素会脱离文档流（可以清空格）。
包裹性
为 div 设置了 float 之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。
例题
例题：写一个左边固定宽度，右边自适应的两栏布局
<div id="left"></div>
<div id="right"></div>
#left {
float: left;
width: 200px;
}
#right {
width: 100%;
margin-right: -200px;
}
那么上题的基础上如何清除浮动？
什么是清除浮动 - clearfix
在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫清除浮动。
清除浮动的方法
方法一：clear:both
- 在浮动元素后使用一个空元素如
<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
实现原理：通过引入清除区域，这个相当于加了一块看不见的框把定义clear属性的元素向下挤。
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。 - 使用邻接元素处理，直接给浮动元素后面的元素添加
clear:both;属性。 - <推荐>使用CSS的
:after伪元素和IEhack（这里的 IEhack 指的是触发 hasLayout）
实现原理：通过将这个类添加到父容器当中，会在父容器的末尾增加了一个高度为0、具有清除属性的、不可见的块级元素。
这种方法清除浮动是相对完美的一种清除浮动，利用
:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而clearfix利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
使用方法：给浮动元素的容器添加一个clearfix 的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的 Block element 清理浮动。
. clearfix {
zoom: 1;
}
/*==for IE6/7 Maxthon2==*/
. clearfix :after {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
}
/*==for FF/chrome/opera/IE8==*/
-
clear:both;指清除所有浮动； -
content: '.'; display:block;对于FF/chrome/opera/IE8浏览器是不可或缺的，其中content可以取值也可以为空。 -
visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。 - 为了IE6和IE7浏览器，要给
clearfix这个class添加一条zoom:1;触发haslayout。
优点：可以完美兼容当前主流的各大浏览器。
补充学习：
Flex 布局教程 - 阮一峰
经典的“圣杯布局”和“双飞翼布局”
方法二：触发浮动元素父元素的 BFC
BFC能清理浮动主要运用的是它的布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
浮动清理利用的主要是第六条规则，只要将父容器触发为BFC，就可以实现包含的效果。
如何创建BFC：浅谈CSS盒模型
总结
- 使用:after伪元素方法作为主要清理浮动方式，文档结构更加清晰。
- 在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）
- 如果本身就是浮动元素则可自动清除内部浮动，无需格外处理
- 正文中使用邻接元素清理之前的浮动。
特别提醒：当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。
最后，希望大家阅后掌握清除浮动的方法，根据需要进行灵活选择。
