前端三剑客之CSS---浮动的难点解析三（使用clear清除浮动和伪元素after清除浮动以及终极解决浮动的.clearfix类)

清除浮动的两种基本通用方式

1. 使用clear清除浮动

作用：可以清除某个浮动元素对下面布局的影响！

可选值：

• left 清除设置了float:left的元素对自己的影响。
• right 清除设置了float:right的元素对自己的影响。
• both 清除两侧浮动中对自己影响最大的那一侧浮动。

疑问？何为最大影响？
clear本质：

它的本质是给某个元素设置一个正的margin-top值。当一个元素上面有一个浮动元素时，浏览器会自动计算出该浮动元素的盒子占地大小（可见框+margin）,然后给后面的那个被它盖住的元素设置该margin-top值，以此来清除浮动的影响！。

何为最大影响？

当该元素上方既有左浮元素，又有右浮元素时，浏览器会计算出哪个盒子占地面积最大，然后就给下方元素设置该margin-top值！

结论：clear的本质就是设置margin-top值，以此来撑起父元素的高度！并且clear:both并不是字面上的清除两端浮动，而是取最大值进行清除！只有块级元素才可以使用clear属性，对于行内元素和行内块元素不起作用！

2. 使用伪元素after清除浮动

使用伪元素清除浮动原理：
其实就是在某个父元素后面动态生成一个块级盒子，然后给该盒子设置clear:both属性，本质上还是使用的clear:both来清除浮动。它的好处是：它避免了单独创造一个空的html盒子，而是直接用css的伪元素来创建一个盒子！

<div class="father">
<div class="son1"></div>
</div>

.father{
border:5px solid red;
}
.son1{
width:100px;
height:50px;
background-color:pink;
float:left;
}
.father::after{
content:'';
display:block;
clear:both;
}

采用clear:both来清除浮动或者使用伪元素清除浮动，副作用小，比元素开启BFC更加实用！

清除浮动的最终方式：clearfix类----用于解决父子之间浮动和外边距重叠问题

该样式既可以清除浮动，又可以解决外边距重叠问题！是一个终极解决浮动问题和外边距问题的类写法！！！
clearfix类的写法：

.clearfix::before,.clearfix::after{
content:'';
display:table;
clear:both;
}

原理：
首先content:'';和display:table这两个是用来解决外边距重叠问题，即将子父类外边距分开！注意：设置为display:block不行，不能分开子父外边距！！！
然后这三个属性加起来又可以解决浮动的问题，因此一举两得！