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

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

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

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

 

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

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

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

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

.clearfix:after {
    clear: both;
}

备注：

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

参考文献：

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

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

关于垂直方向margin叠加问题