CSS清除浮动的关键clear:both

相信大家已经知道为什么需要浮动以及为什么需要清除浮动。下面主要聊聊清除浮动的原理，关键是说清楚clear:both的作用。

一、清除浮动的关键
我个人比较喜欢双伪元素的写法，主要是好记：

.clearfix:before,
.clearfix:after {
    content: ””;
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

其实不管是双伪元素还是单伪元素，都是实践中常用的做法。所谓W3C的推荐做法反而并不常见，但其原理和伪元素做法是一样的。首先在html中浮动元素后面加一个兄弟元素：

然后对clear设置clear:both：

.wrapper {
    width: 500px;
    background-color: purple;
}

.son {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
}

.clear {
    clear: both;
    background-color: pink;
}

没有什么花里胡哨，清除浮动就是一行clear:both搞定。

二、clear:both的理解
如果你只看了w3school的简单说明，可能还是不明白clear的意义。

定义和用法
clear 属性规定元素的哪一侧不允许其他浮动元素。

说明
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

MDN的介绍是：

clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

emmmm...移动到下面，这个比较好理解了。本来是不会移动到下面的，看MDN的demo截图：

浮动本来是了处理图片和文字围绕问题的，正常情况下文字绕着“图片”（left和right）走就是了，文字所在的div还是照旧无视浮动的left和right两个div，谁叫你俩脱标了呢。
但是，对文字div使用了clear:left之后，文字div左边不允许有浮动元素。怎么个不允许？自个儿挪地方，移动到div.left下面去。文字div右边还是允许有浮动元素的，所以不必移动到div.right下面。

这个挪地方怎么理解呢？它是文字所在的div整个挪下去，不是文字改变环绕方式。
不清除浮动（clear:none）是这样的：（文字所在div用红色框表示）

清除左边浮动（clear:left）是这样的：（文字所在div用红色框表示）

因此，某个元素设置clear清除浮动，就是自身向下移动，不和浮动的元素发生重叠。在移动的过程中，clear元素就把父元素高度撑开了。毕竟自身是标准流，父元素可以忽视浮动的逆子，但必须包含标准流好孩子。

另外，我们其实不想看到clear元素，也不希望它影响其他元素的观感。所以，伪元素代码做法中又搭配了其他的content:""、height:0等属性来隐藏它，最终呈现出来clear元素就是一个有width无height的工具人。