1.三个已经混淆的概念
（1）不浮动float:none;
（2）清除周围的浮动元素
（3）清除子元素浮动对父元素的影响
2.什么是清除浮动
清除浮动不是把当前标签的浮动给清楚了，如果这样，还加浮动做什么。
其实清除浮动指的是清除当前元素旁边的浮动元素，但是当前元素又不能影响别人，打不赢就跑，所以自己就跑到下面去了。
3.为什么要清楚浮动
在布局的时候我们经常希望某些内容能够水平排布，水平排布后，由于内部内容不确定，高度不能简单的给一个定值。而如果不给高度，子元素又都浮动了，父盒子就会因为没有子盒子的支持而塌陷。
利用清除浮动的这个特性，我们可以给父元素中最后一个不浮动的盒子使用clear:both从而把父盒子的高度撑起来，并且能够根据内部内容的变化而改变高度。
4.清除浮动的方法
（1）额外标签法
原理：单独使用一个标签加上clear:both跑到浮动元素下面，从而消除子盒子浮动造成的父盒子塌陷。
典型网站：京东
优点：通俗易懂，容易掌握
缺点：添加很多无意义的空标签，不符合结构与表现分离的原则，不利于后期的维护。
（2）父元素设置overflow:hidden
原理：让父盒子形成BFC，BFC的特性之一就是可以承载浮动元素
优点：不存在结构和语义化问题，代码量极少。
缺点：内容增多时候不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
BFC（block formatting content）快格式化上下文，是W3C规定的一种独立渲染区域。
其特性为：
- BFC会阻止外边距折叠
- BFC可以承载浮动元素
- BFC可以阻止元素被浮动元素覆盖
总而言之，就是独立了。
哪些情况会触发BFC
- float除了none以外的值
- overflow除了visible以外的值（hidden,auto,scroll）
- display（table-cell,table-caption,inline-block）
- position（absolute,fixed）
- 根元素
（3）单伪元素
.clearfix:after {
content: "";
height: 0;
visibility: hidden;
overflow: hidden;
display: block;
clear: both;
}
.clearfix {
zoom: 1;/*IE67*/
}
典型网站：新浪、网易
（4）双伪元素
.clearfix:before, .clearfix:after {
content: "";
display: table;
}/*在内部元素的前面和后面添加元素*/
.clearfix:after {
clear:both;
}/*只要after两侧有浮动元素，after就会跑到最下面，从而撑开带有该类名的父盒子*/
.clearfix {
*zoom: 1;/*用于兼容IE/7/6*/
}
用display:table是因为display:block有空隙
加了一个before是为了防止外边合并
典型网站：小米、淘宝
来源：https://www.cnblogs.com/Jerry-MrNi/p/6339613.html