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">

   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam dolorem eligendi laudantium libero magnam magni numquam voluptas voluptatem voluptatibus? Consequuntur delectus dolorem esse explicabo minus neque non quaerat voluptatum!

 </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浮动便不会带来父元素的高度坍塌影响。

5.总结

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

参考资料：

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

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

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

  2. float---浮动带来的影响与清除浮动带来的影响方法----在路上（20）

    使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此 ...

  3. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

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

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

  5. 《----css样式---------浮动带来的影响与解决方法---------------》

    浮动就是让我们的元素脱离标准文档流,目的是为了布局好看! 浮动的现象: 脱离标准文档流被叫做脱流,同时会出现字围现象. 浮动的元素会相互贴靠,而且如果父容器空间足够大,则浮动的元素会正常紧靠也就是后一 ...

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

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

  7. CSS浮动并清除浮动(造成的影响)

    一.浮动 CSS浮动    CSS float浮动的深入研究.详解及拓展(一)    CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以 ...

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

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

  9. 清除浮动(float)的影响

    浮动会导致父元素塌陷如图: 解决办法: 父元素overflow:hidden,如图 末尾插入子元素clear,如图 为甚么,父元素overflow:hidden会解决塌陷问题? 来自知乎貘吃馍香的回答 ...

随机推荐

  1. Java Spring Boot 上传文件和预览文件地址解析

    @RequestMapping(value ="/upload",method = RequestMethod.POST) @Permission(isAjax=false) pu ...

  2. FPGA中的除法运算及初识AXI总线

    FPGA中的硬件逻辑与软件程序的区别,相信大家在做除法运算时会有深入体会.硬件逻辑实现的除法运算会占用较多的资源,电路结构复杂,且通常无法在一个时钟周期内完成.因此FPGA实现除法运算并不是一个&qu ...

  3. SpringCloud实战-Eureka

    熟悉微服务架构或Dubbo框架的都知道,微服务中最核心.最基础的组件就是注册中心了.下面利用Spring Cloud Eureka实现服务注册中心.并注册一个简单的服务提供者. 首先先创建一个spir ...

  4. [Java算法分析与设计]--线性结构与顺序表(List)的实现应用

    说到线性结构,我们应该立马能够在脑子里蹦出"Array数组"这个词.在Java当中,数组和对象区别基本数据类型存放在堆当中.它是一连串同类型数据存放的一个整体.通常我们定义的方式为 ...

  5. 使用xshell链接虚拟机的方法

    给大家介绍一下虚拟机和Xshell5连接的基本配置1.安装虚拟机,跟着提示一步一步安装即可,注意添加镜像文件,虚拟机就完成了.2.下载一个Xshell5,安装好之后.要修改虚拟机的网卡状态    1) ...

  6. Django rest framework（7）----分页

    目录 Django rest framework(1)----认证 Django rest framework(2)----权限 Django rest framework(3)----节流 Djan ...

  7. 二十、Hadoop学记笔记————Hive On Hbase

    Hive架构图: 一般用户接口采用命令行操作, hive与hbase整合之后架构图: 使用场景 场景一:通过insert语句,将文件或者table中的内容加入到hive中,由于hive和hbase已经 ...

  8. Python Selenium 之生成Beautiful可视化报告

    提到自动化测试,少不了自动化生成测试报告,更少不了漂亮的测试报告呀!刚好看到在github上有个大神分享了BeautifulReport,与unittest测试框架完美的结合起来,就能生成Beauti ...

  9. UsernamePasswordAuthenticationToken

    UsernamePasswordAuthenticationToken继承AbstractAuthenticationToken实现Authentication所以当在页面中输入用户名和密码之后首先会 ...

  10. 1. Java面向对象之泛型－认识泛型

    package generic; class Point{ private  Object x; private  Object y; public Object getX() { return x; ...