两种好用的清除浮动的小技巧（clearfix hack）

Posted 2021-01-20 codebook

方法一：使用内容生成的方式清除浮动

这种方法不能解决margin在垂直边界上的叠加问题，如果不涉及margin的边界叠加问题使用这种方法清除浮动就行了 。

 1 /*
 2 :after 选择器向选定的元素之后插入内容 
 3 content:" "; （注意这里有一个空格）生成内容为空 
 4 display: block;
 5 clear:both; 清除前面元素浮动带来的影响 
 6 */
 7 .clearfix:after {
 8    content:""; 
 9    display: block; 
10    clear:both; 
11 }

 

方法二：使用伪元素方式清除浮动

bootstrap3.3.7中就使用这种方法清除浮动，这种方法代码比第一种多一点，不过它能解决margin在垂直边界上的叠加问题。

盒子模型垂直方向的距离由margin决定。属于同一个BFC(Block formatting context直译为”块级格式化上下文”)的两个相邻盒子的margin会发生重叠 
注意：发生重叠后，外边距的高度等于两个发生重叠的外边距的高度中的较大者。至于margin的边界重叠和BFC的问题有很多资料可查我就不再赘述了。

 1 /*
 2 浏览器支持： Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 8+
 3 1.  content:" ";（注意这里有一个空格）是为了避免Opera Bug的一种方法。
 4 当contenteditable这个属性包含在document中的任何地方时会导致空格符出现在元素的顶部和底部，这些空格符是需要清除的。
 5 2.  当‘:before‘需要包含其子元素的margin-top时，使用‘table‘替代‘block‘。
 6 */
 7 .clearfix:before,
 8 .clearfix:after {
 9     content: " "; /* 1 */
10     display: table; /* 2 */
11 }
12 
13 .clearfix:after {
14     clear: both;
15 }

备注：

这两种方法都不破坏文档结构也没有什么副作用兼容性也好，网上也有其他清除浮动的方法，不过都有些弊端，这两种相对更好一些。

参考文献：

清除浮动 的多种方式（clearfix）：https://blog.csdn.net/FE_dev/article/details/68954481 

A new micro clearfix hack：http://nicolasgallagher.com/micro-clearfix-hack/