了解伪元素清除浮动原理

为什么伪元素能够清除浮动，这个问题想了很长时间，看了很多别人写的文章但始终没有理解，主要是对clear这个属性无法理解，直到今天看到 mdn 对clear的说明。

先来看下伪元素清除浮动的写法：

.clearfix{
	content: "";
  	display: block; 
  	clear: both;
}

• content，伪元素没有这个属性则无法生效；
• display：block；用来独占一行

上面两个属性应该很好理解。接下来是 mdn 对 clear 的解释：

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的垂直外边距会折叠。

另一方面，两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边框边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

注：clear 只适用于块级元素

看下clear的效果：

1. 先是对浮动元素添加clear：
   ul 中的 5 个 li 标签浮动，中间有个元素高度比较高；蓝色是 ul 的边框
   
   给最后一个 li 标签添加 clear：both；
   
   看到使用 clear 清除左边的浮动后，最后一个标签移动到下一行并与最高的浮动的元素下边框相邻；此时如果去除最后一个标签的浮动会如何？
   给最后一个标签再添加 float：none
   

2. 然后是非浮动元素：

	

        
aaaaaaa
        
aaaaaaa
        
aaaaaaa
        
aaaaaaa
        
aaaaaaa
        

    

为了方便看，我给 div 加了 10px 的高度和背景色；
因为 li 标签浮动脱离文档流，所以 div 自然而然的跑到最前面。
添加 clear 后：

效果和浮动元素一样，此时如果把 div 的高度设为 0，会发现也起到了清除浮动的作用。

伪元素清除浮动的原理和上面两个很像：
：after 元素会追加到父元素里面所有的内容最后面

ul:: after{
	content: '伪元素after'
}

因为伪元素时内联元素，所以需要设置为块级元素；之后使用 clear 清除左边的浮动，伪元素就会到下一行去，上边框与最高的浮动元素高度相邻；

将 content 里的内容删去，就能达到清除浮动的效果；