为什么会出现清除浮动的问题，如何用CSS解决

为什么会出现清除浮动的问题，如何用CSS解决

一.为什么会出现清除浮动的问题：

如果在标准流下面一个父元素没有设置高度属性,那么它的高度就会被子元素的高度撑开，即自适应。但是如果这个父元素中的子元素是浮动的话，由于浮动元素不再占用原文档流的位置，浮动元素的高度不会计算在父元素的高度中，父元素的高度会为0，即呈现塌陷的状态。我们为了解决这类问题，提出了清除浮动。

二.如果用CSS清除浮动：
1》直接给父元素添加高度
但是在浮动元素高度不确定的时候不适用

2》直接利用clear：both
直接在父元素的最底下 添加一个块级标签（p,div等），然后赋予它clear：both 来清除浮动
但是这样会产生大量没有用的空元素，浪费资源，不是最优解

3》利用BFC：
①.什么是BFC：
直译为"块级格式化上下文"。它是一个独立的渲染区域，是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

②解决方案一：
给父元素样式添加overflow：hidden（只要不是visible），添加这个语句后，会创建一个BFC，会把浮动元素困在BFC中，不让其脱离文档流，会先计算浮动元素的高度，再hidden隐藏，父元素获得高度，就会撑开

③解决方案二：
给父元素添加 浮动float：right（只要不是none），添加这个语句也会创建一个BFC，原理相同，但是有时候我们不需要让父元素浮动，与我们的需求相违背

4》利用伪类：
通过父元素的::after伪元素来生成浮动元素的兄弟元素，然后兄弟元素使用clear:both方法。

这种思想与第一种方案类似，但是没有创新多余的空元素，直接利用父元素的伪类

但是上面的利用伪类的方案不是特别完美，我们可以进行改进：

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

.clearfix:after {
    clear: both;
}

①.首先为什么不用display：none而改用display：table

不理解这个问题可以再看一下这个

一般情况下 block就可以了，因为block和table的目的，都是为了让伪类成为块级元素，但是table会更完美一些

②.为什么：before也要设置display：table
我也不太懂，但是网上说是兼容性的问题0.0