(2019)[前端]面试题[2]：清除浮动的方式

Hello，欢迎来到我的博客，每天一道面试题，我们共同进步。

问题

清除浮动的方式

前提

什么是浮动

我们首先得明白什么是浮动：在较早的时候，那时候布局是没有现在的flex之流的。那个时候比较流行的是浮动布局：float。但是用了之后，是可以解决一些布局问题，但又带来了其他问题了。

普通情况下父元素高度由子元素高度决定：

截图-1569663230

.parent {
    width: 50vw;
    padding: 5px;
    border: 10px solid #000;
}

.child {
    width: 100%;
    height: 100px;
    background-color: red;
}

<div class="parent">
    <div class="child"></div>
</div>

但是如果子元素浮动后呢？

截图-1569663296

很明显，高度塌陷了，这是浮动后我们最需要解决的一个问题。

有趣的概念

网上有人提出了两个名词：清除浮动和 闭合浮动

清除浮动：清除在样式中添加：clear:both,left,right 这也叫清除浮动。

闭合浮动：增加浮动后，使浮动元素闭合，从而减少浮动带来的影响。

为什么要清除浮动

很简单，浮动虽然满足了我们的一些布局要求，但是，也遗留了很多问题。比如：高度塌陷问题。

解决

清除浮动很多办法，但是我们要找一个最好的办法。面试的时候，肯定也会问最好的办法。

最好的办法

利用伪元素清除

接着之前的案例，我们给父元素增加一个after伪类：

.parent::after {
    clear: both;
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
}

注意： 1、以上基本是业界固定的写法，网上说如果非要兼容IE6-7，添上room:1;个人觉得没有必要。 2、必须要父元素身上加，才有用。

截图-1569663575

此方法优点：

1、不会产生额外元素 2、不影响其他布局，方便以后修改。

额外添加元素

我们额外定义一个类：

.clear {
    clear: both;
}

在浮动元素后，新增一个元素并添加此类：

<div class="parent">
    <div class="child"></div>
    <div class="clear"></div>
</div>

截图-1569663575

一样的效果

缺点：

1、增加了额外元素，不方便后期代码维护。

利用BFC清除

此处不再赘述，可参考前一天发的文章：https://www.misiyu.cn/article/96.html#%E5%88%A9%E7%94%A8BFC%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8

总结

其实还有很多方法，但是最简单就是这两种，也最常用。

若想参考其他解决方法，请参考：https://blog.csdn.net/mrfang1413/article/details/80386203

http://www.sohu.com/a/237178445_608275