Hello,欢迎来到我的博客,每天一道面试题,我们共同进步。
清除浮动的方式
我们首先得明白什么是浮动:在较早的时候,那时候布局是没有现在的flex之流的。那个时候比较流行的是浮动布局:float。但是用了之后,是可以解决一些布局问题,但又带来了其他问题了。
普通情况下父元素高度由子元素高度决定:
.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>
但是如果子元素浮动后呢?
很明显,高度塌陷了,这是浮动后我们最需要解决的一个问题。
网上有人提出了两个名词:清除浮动和 闭合浮动
清除浮动:清除在样式中添加:clear:both,left,right 这也叫清除浮动。
闭合浮动:增加浮动后,使浮动元素闭合,从而减少浮动带来的影响。
很简单,浮动虽然满足了我们的一些布局要求,但是,也遗留了很多问题。比如:高度塌陷问题。
清除浮动很多办法,但是我们要找一个最好的办法。面试的时候,肯定也会问最好的办法。
利用伪元素清除
接着之前的案例,我们给父元素增加一个after伪类:
.parent::after {
clear: both;
content: '';
display: block;
height: 0;
visibility: hidden;
}
注意: 1、以上基本是业界固定的写法,网上说如果非要兼容IE6-7,添上room:1;个人觉得没有必要。 2、必须要父元素身上加,才有用。
此方法优点:
1、不会产生额外元素 2、不影响其他布局,方便以后修改。
我们额外定义一个类:
.clear {
clear: both;
}
在浮动元素后,新增一个元素并添加此类:
<div class="parent">
<div class="child"></div>
<div class="clear"></div>
</div>
一样的效果
缺点:
1、增加了额外元素,不方便后期代码维护。
此处不再赘述,可参考前一天发的文章: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