为什么要清除浮动

因为浮动的子元素会导致他的父元素高度坍塌，就是没有高度了，如果父元素没有设置高度的话。

怎么清除浮动？

• 1.触发BFC：BFC 的特性之一就是浮动的子元素的高度也会参与触发 BFC 的父元素的高度计算，所以所有可以触发 BFC 的方法都可以用来清除 BFC
• 2.clear: both

触发 BFC 的方式

• 1.将父级也设置成浮动

这种方法肯定是弊大于利，想想都知道，父级设置成浮动了，那爷爷级肯定又会受影响，又得解决爷爷级的高度坍塌，这不是无限套娃吗？？

• 2.给父级增加定位absolute 或者 fixed

也会脱离文档流啊，影响了整体布局，这不是给自己找罪受吗？

-3.给父级设置overflow:hidden

缺点：当文本过长，且包含过长英文时，会出现英文文本被隐藏的情况

-4.给父级设置对应的高度

缺点：如果浮动元素是定宽的，那还好，如果是不定宽的，那这种方式就很不灵活了

-5.末尾增加空元素进行clear

<div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottomDiv"></div>
</div>

.bottomDiv {
            clear: both;
        }

这里bottomDiv设置成clear:both，代表了它左右都不能有浮动元素，这迫使了他往下移动，进而撑开了父级盒子的高度。

这种方法就为了清除浮动给页面增加了一个标签，不妥

-6.给父级添加伪元素进行clear

.box::after {
            content: '.';
            height: 0;
            display: block;
            clear: both;
        }

完美的方法