CSS 清除浮动的方法

为什么要清除浮动

因为浮动元素会脱离文档流，对父级元素的高度产生一定的影响。如果一个父级元素中的子元素都是浮动元素，那么父级元素的高度就会为0，即我们常说的高度塌陷

怎么清除浮动

第一种方法：空div方法。这种方法是在父元素的结尾前加一个空白的div如:

div{
height:0;
display:“block”;
clear:both;
}
其实操作就是你要清除浮动的后面那个元素加个clear：both。如果你后面没有div，那当然得加一个空白的不是。

但是这种写法不符合我们作为一个优秀的前端程序员该有的结构与表现分离的原则，所以可以是可以，但是没必要。

第二种方法：给父元素也加上浮动。额…这种方法治标不治本，浮动影响其实依然存在，最后可能会俄罗斯套娃一层层往上加浮动，所以五星好评，分五期付款

第三种方法：触发BFC。什么是BFC？下次再说。。。开玩笑的。其实BFC就是“块级格式化上下文”，它是一个独立的区域，外面的元素是不会影响到它的。它有着自己一套的布局规则，其中计算高度的时候它就不会放过浮动元素，也正因为这点，我们就可以利用这个特性来达到看似清除浮动的效果。

那么怎么触发BFC：
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

可以看到刚才我们说的父级元素添加浮动就会触发BFC，哦豁，破案了。
其实我们触发BFC最常用到的是overflow：auto，当然你也可以是overflow：hidden。但是话说回来，触发BFC是有风险的，无论是哪种触发方式，它都有可能改变盒子的模型，然后翻车，然后改bug，然后改到崩溃，然后再翻…再改…再崩…

第四种方法：使用：：after伪元素。完美兼容各大主流游览器，简单方便通俗易懂，减轻程序员手打代码的压力，让网页水润细致有光滑，我愿称它为最强，懂的都懂。好，言归正传。讲一下操作。其实就是
父级元素{
}
父级元素：：after{
content:"";
display:block;
height:0;
clear:both;
}

细心的小朋友可能已经发现了秘密，没错，这不就跟加个空白div一样吗？哦豁妙就妙在这，在HTML文件里不用写累赘的div我们也能实现该有的效果。这就是它为什么是最强的原因，各位看官细品。

最后，今天的不开心就止于此吧，明天依旧光芒万丈啊宝贝~