1.问题起源

在平时的业务开发写CSS中，为了满足页面布局，元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题，但是也带了一些副作用影响，比如，父元素高度塌陷，我们有好几种可以清除浮动的方法，最常用的就是设置父元素的overflow:hidden这个属性，每次在写代码的时候总是这样写，但是，自己从没深度思考过这些写为什么能够清除浮动，最近，自己也查阅了一些资料，谈谈自己的理解。

2.情景再现

先上代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>清除浮动</title>

  <style>

    .container{

      border: 1px solid #000;

　　   background: #0f0;

    }

   .child{

     float: left;

   }

  </style>

</head>

<body>

<div class="container">

 <div class="child">

  你好

 </div>

</div>

</body>

</html>

代码很简单，就是父元素container里面包含了一个子div元素child，然后我们使子元素的div向左浮动，结果来看，父元素只显示了四个方向边框的高度，背景颜色未显示，这是因为子元素浮动脱离文档流造成父元素高度塌陷。

3.解决方法

.container{

     border: 1px solid #000;

     background: #0f0;

     overflow: hidden;

   }

只在container父元素加了一行overflow:hidden

父元素高度被撑起来了，背景颜色也显示出来了。

4.BFC概念

我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。

先记住一个原则： 如果一个元素具有BFC,那么内部元素再怎么翻江倒海，翻云覆雨，都不会影响外面的元素。所以，BFC元素是不可能发生margin重叠的，因为margin重叠会影响外面的元素的；BFC元素也可以用来清除浮动带来的影响，因为如果不清楚，子元素浮动则会造成父元素高度塌陷，必然会影响后面元素的布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。

以下情况会触发BFC:

  • <html>根元素
  • float的值不为none
  • overflow的值为auto，scroll，hidden
  • display的值为table-cell，table-caption和inline--block中的任何一个
  • position的值不为relative和static

显然我们在设置overflow值为hidden时使container元素具有BFC，那么子元素child浮动便不会带来父元素的高度坍塌影响。

利用BFC可以闭合浮动，防止与浮动元素重叠。

5.总结

设置overflow为hidden使元素具有BFC而不会受子元素的影响，但是当子元素过多需要滚动显示时，我们可以设置overflow的值为auto或acroll，超出父元素之外的元素会被隐藏。使用overflo:hidden也具有一定的局限性，所以我们应该根据具体的业务场景来选择合适的方法。

参考网址：

https://www.jb51.net/css/648048.html

https://blog.csdn.net/qq_41638795/article/details/83304388

https://www.cnblogs.com/GP-233/p/7140611.html

详解为什么设置overflow为hidden可以清除浮动带来的影响的更多相关文章

  1. 为什么设置overflow为hidden可以清除浮动带来的影响

    1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...

  2. CSS中为什么overflow:hidden能清除浮动(float)的影响？原理是什么？

    http://www.zhihu.com/question/30938856 父块没有设置指定的高宽,当子块设置为浮动后,原本包裹子块的父块的高度塌陷消失,这时给父块设置overflow:hidden ...

  3. Linux服务器，服务管理--systemctl命令详解，设置开机自启动

    Linux服务器,服务管理--systemctl命令详解,设置开机自启动 syetemclt就是service和chkconfig这两个命令的整合,在CentOS 7就开始被使用了. 摘要: syst ...

  4. NPOI2.2.0.0实例详解(十)—设置EXCEL单元格【文本格式】 NPOI 单元格 格式设为文本 HSSFDataFormat

    NPOI2.2.0.0实例详解(十)—设置EXCEL单元格[文本格式] 2015年12月10日 09:55:17 阅读数:3150 using System; using System.Collect ...

  5. 详解PHP设置定时任务的实现方法

    详解PHP设置定时任务的实现方法 一.总结 一句话总结: 1.ignore_user_abort(true)是什么意思? 无论客户端是否关闭浏览器,下面的代码都将得到执行 2.set_time_lim ...

  6. overflow:hidden的清除浮动效果

    我们都知道"overflow:hidden"可以溢出隐藏,即当内容元素的高度大于其包含块的高度时,设置该属性即可把内容区域超出来的部分隐藏,使内容区域完全包含在该包含块中. 然而& ...

  7. 关于文本设置overflow：hidden后引起的垂直对齐问题

    目前有这样的需求,一行标题中,前面为图标,后面是文字,文字要实现一行省略的效果 首先把文字设为:display: inline-block; 然后设置省略: overflow: hidden; wor ...

  8. [转载]Altium规则详解及设置

    在Altium中进行PCB的设计时,经常会使用规则(Rule)来进行限定以确定线宽孔径等参数,此文将简要的介绍规则中的一些标量代表了什么. Electrical——电气规则.安全间距,线网连接等 Ro ...

  9. 【Android 界面效果20】Android GradientDrawable类的详解，设置activity的背景颜色渐变效果

    看到这个例子的标题RoundRects,我的第一感觉是介绍RoundRectShape, 打开例子看了代码却是使用GradientDrawable来实现的. GradientDrawable 支持使用 ...

随机推荐

  1. html js 遮罩层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. oracle库两个表关联查询时用 count 报错【我】

    oracle数据库,需要对两个表进行关联查询(根据两个字段),结果发现关联后不能改为 count 获取数量,报错如下: 同样的sql换到另外一个数据库就可以(只是因为数据量在千万级,所以很慢,用时40 ...

  3. VS2015编译gdal库

    gdal下载地址:http://trac.osgeo.org/gdal/wiki/DownloadSource 修改nmake.opt中的一些配置.1. GDAL_HOME = “C:\warmerd ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_02-用户认证技术方案-单点登录

    2 用户认证技术方案 2.1 单点登录技术方案 分布式系统要实现单点登录,通常将认证系统独立抽取出来,并且将用户身份信息存储在单独的存储介质,比如: MySQL.Redis,考虑性能要求,通常存储在R ...

  5. Elasticsearch（ELK）集群搭建

    一.前言 Elasticsearch是一个开源的高扩展的分布式全文检索引擎,它可以近乎实时的存储.检索数据:本身扩展性很好,可以扩展到上百台服务器,处理PB级别的数据.Elasticsearch也使用 ...

  6. CentOS7下搭建zabbix监控（五）——Web端配置自动发现并注册

    好像有点问题,没法自动添加主机,我后期再测测 (1).自动发现主机并注册 1)创建发现规则 2)编辑自动发现规则信息(这两步不配置问题也不大,因为在动作中也有主机IP地址) 3)添加自动发现的动作 4 ...

  7. 123457123457#0#-----com.yuming.TruckCarRun01--前拼后广--大卡车游戏cym

    com.yuming.TruckCarRun01--前拼后广--大卡车游戏cym

  8. SpringCloud学习成长之 九 服务链路跟踪

    这篇文章主要讲述服务追踪组件zipkin,Spring Cloud Sleuth集成了zipkin组件. 一.简介 Spring Cloud Sleuth 主要功能就是在分布式系统中提供追踪解决方案, ...

  9. C# using语句 中间出现exception后 using仍然会dispose

    C# using语句,中间出现exception后,using仍然会dispose,因为: using语句 相当于 try-finally{dispose()}

  10. react——Table组件列中靠左 靠右对齐解决方案

    最近项目中遇到一个需求调整:table中的文字过长居左排列,数字居右排列 然后看了一下官方文档: 先上图展示一下 左边是需要的效果: className: 'column-left', { title ...