专栏首页无道编程(2019)[前端]面试题[2]:清除浮动的方式

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

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、增加了额外元素,不方便后期代码维护。

利用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 云计算和边缘计算,谁更依赖数据引力?

    如今,越来越多的应用程序和数据应用在网络经济中。然而,目前还不完全清楚它们的部署是以向心还是离心的方向移动,也就是说是向内移动到核心的云平台,还是向外移动到边缘...

    CloudBest
  • 一个好的新闻App,需要...

    单平台的APP必定让企业舍弃用户,跨平台才是王道。对于中小企业来说,开发自己的APP就意味着需要配置IOS和android的程序员,根据开发难度需要的人员数量不...

    齿轮易创说互联网
  • Tcl是什么?

    安装Vivado之后,在GUI界面会看到Tcl Console,在这里可以输入Tcl命令。同时,还会发现有一个所谓的“Vivado 2018.2 Tcl She...

    Lauren的FPGA
  • 快速学习Docker-数据卷容器

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • 关于C#界面开发winform与SharpGL结合鼠标只在OpenGLControl绘图区域显示坐标移动消息响应(c#鼠标单独在某个控件上的消息响应)

    原文链接:https://www.cnblogs.com/DOMLX/p/11773260.html

    徐飞机
  • 谈谈notify和notifyAll的异同

    经常在网上逛,关于在java中notify和notifyAll,经常有人有以下的说法:

    一个优秀的废人
  • Zookeeper选举机制

    Leader选举是保证Zookeeper集群数据一致性的关键,只有Leader确定的情况下,集群才可以对外提供服务,通常分为启动时Leader选举和运行时Lea...

    搬砖俱乐部
  • 来了来了,TAPD 项目模板真的来了

    ? ? 在日常的项目管理和团队协作过程中,管理员对于同类型的项目有着标准化的管理方式。 我们在与TAPD管理员沟通过程中,常常也会听到这样的诉求: ? “我们...

    TAPD敏捷研发
  • 如何将 Pycharm 打造得更称手

    Pycharm 分为 Community (社区版) 和 Professional(专业版),两个版本对比如下:

    不可言诉的深渊
  • 发展中地区的气候变化与粮食短缺:Python分析

    今天讨论的最重要的环境问题之一是全球变暖。这是由于气候变暖对农作物产量,天气模式,海平面,野火事件和生态系统的影响。自1850年代开始保存记录以来,全球温度的上...

    代码医生工作室

扫码关注云+社区

领取腾讯云代金券