前端开发页面过程中,当布局出现浮动元素的时候,会经常用到这行CSS代码(overflow: hidden)。它的作用是【清除浮动】,能帮助解决界面布局中遇到的不少问题,比如:高度塌陷,垂直边距重叠,自适应布局等。那么,大家知道是什么原因让它能发挥如此强大的作用呢?下面我们来了解一下吧~
一、什么是BFC
在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写,直译为格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。常见的FC有BFC、IFC,还有GFC和FFC。
这里重点讲一下BFC(block formatting context),直译为块级格式化上下文,简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素主要受该浮动元素影响,两个浮动元素之间是互不影响的。 也就是说,如果一个元素符合了成为BFC的条件,该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC),是一个隔离了的独立容器。(在 CSS3 中,BFC 叫做 Flow Root)
二、BFC布局规则:
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算。
三、形成 BFC 的条件
满足下列条件之一就可触发BFC:
1、根元素
2、浮动元素,float 除 none 以外的值
3、绝对定位元素,position(absolute,fixed)
4、display 为以下其中之一的值(inline-block、table-caption、inline-flex、inline-grid)
5、overflow 除了 visible 以外的值(hidden,auto,scroll)
四、BFC的作用
1、清除内部浮动
解决【高度塌陷问题】
在通常情况下父元素的高度会被子元素撑开,而在这里因为其子元素为浮动元素,浮动元素会脱离文档流(绝对定位元素也会脱离文档流),导致无法计算准确的高度。所以父元素发生了高度坍塌。
代码:
<style> .par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width:100px; height: 100px; float: left; } </style> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body>
页面效果:
根据BFC布局规则第6条:计算BFC的高度时,浮动元素也参与计算。
为达到清除内部浮动,我们可以触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算。
代码:
.par { overflow: hidden; }
效果如下:
2、自适应两列布局
解决【 div浮动兄弟遮盖问题】
由于左侧块级元素发生了浮动,所以和右侧未发生浮动的块级元素不在同一层内,所以会发生div遮挡问题。
代码:
<style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; } </style> <body> <div class="aside"></div> <div class="main"></div> </body>
页面效果:
根据BFC布局规则第3条:
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。
根据BFC布局规则第4条:BFC的区域不会与float box重叠。
我们可以通过通过触发main生成BFC, 来实现自适应两栏布局。
代码:
.main { overflow: hidden; }
当触发main生成BFC后,这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。
效果如下:
3、防止垂直margin重叠
解决【margin塌陷问题】
在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现象。
代码:
<style> p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p> <p>Hehe</p> </body>
页面:
两个p之间的距离为100px,发生了margin重叠,距离只显示了100px。
根据BFC布局规则第2条:
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了,距离显示为200px。
代码:
<style> .wrap { overflow: hidden; } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p> <div class="wrap"> <p>Hehe</p> </div> </body>
效果如下: