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

无道 2019-09-28 0 条评论 前端相关 阅读139 手机阅读

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

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
这篇文章还没有评论呢~
点击刷新/生成验证码
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生,一个儿子~ 愿你我都被世界温暖以待
迷思爱 公众号

新建了个公众号,会不定期分享一些小玩意,有提升效率的办公软件、有一些黑科技的软件、或教程等等。

爷~,要不关注下~~