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

时间: 2018-11-28阅读: 1032标签: 浮动

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也具有一定的局限性,所以我们应该根据具体的业务场景来选择合适的方法。


参考资料:《css世界》-张鑫旭
来源:https://www.cnblogs.com/peerless1029/archive/2018/11/28/10029959.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1433

关闭

Web布局:浮动

不知道大家是否和我有同样的一个感觉,每当拿起一篇杂志文章,总能发现左边或右边有图片,文字流畅地围着图片,这就是打印世界中看到的浮动:在Web的世界中,CSS的 float 设计初衷也是用来处理文本围绕图片排版的,就像在杂志布局中一样

清除浮动的4种方式

清除浮动:根据情况需要来清楚浮动 。清除浮动的目的: 就是为了解决 父 盒子高度为0 的问题。1.、额外标签法 给浮动盒子的后面添加一个新的div;2、overflow:hidden 触发了bfc模式

详解利用clear清除浮动的一些问题解决

我们一直在说 解决 高度塌陷都问题,从来没有说清除浮动。 是因为本质上,浮动并没被清除,我们只是利用clear属性解决了浮动元素带来的父级元素高度塌陷问题。而且clear属性影响也只是设置clear属性的元素本身,而不是浮动元素。

css清除浮动的原理

最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解

总结清除浮动的方法

方法一、在结尾处添加空div标签clear:both;方法二、父级div定义 overflow: auto;方法三、使用伪元素来清除浮动(:after,注意:作用于浮动元素的父亲)

CSS浮动标准修复top塌陷和清除浮动及IE兼容标准格式

浮动元素有左浮动(float:left)和右浮动(float:right)两种,浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来

BFC是个啥?

在CSS布局中,是通过对一个个box的布局,来实现整体页面的布局,这一个个box也就是一个个容器元素,这些元素分为两类:块级元素(block),行内元素(inline)。 对于不同类型的元素

什么是BFC? CSS 如何使用伪元素清除浮动?

BFC概念:块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。

我对BFC的理解

对CSS有了解的道友们肯定都知道盒式模型这个概念,对一个元素设置CSS,首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以及其他的FC。

CSS如何清除浮动?清除浮动的几种方式

在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性。爱,是因为通过浮动,我们能很方便地进行布局;恨,是因为浮动之后遗留下来太多的问题需要解决。下面本篇文章给大家介绍CSS清除浮动的几种方法

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!