左小白的技术日常
Github
2020/07/12
Author: guoqzuo

web前端BFC,什么是BFC

虽然做前端好几年了,但只是听说个这个名词,一直不清楚具体是什么意思,今天来研究下

BFC相关示例

BFC是 Block Formatting Context 的缩写,字面意思是 块格式化上下文 字面意思很难理解,我们先来看几个例子

1. margin塌陷问题

下面的例子中A、B两个元素的margin都为10px,理论上A、B上下间的距离为 20px,但实际却是 10px

<div>
  <div class="elementA" style="margin: 10px">123</div>
  <div class="elementB" style="margin: 10px">456</div>
</div> 

利用BFC解决塌陷的问题,用父元素包裹并设置overflow为hidden,这样间隔就是20px了

<div>
  <div class="elementA" style="margin: 10px">123</div>
  <div style="overflow:hidden">
    <div class="elementB" style="margin: 10px;">456</div>
  </div>
</div> 

2. float父级元素高度为0的问题

wrapper的子元素使用了float,其高度为100px,但他的父级元素wrapper高度为0

<div class="wrapper">
  <div style="float:left;height:100px">123</div>
</div>

解决方案如下,给wrapper添加一个BFC属性,这时wrapper的高度就是子元素的高度

<div class="wrapper" style="overflow:hidden">
  <div style="float:left;height:100px">123</div>
</div>

3. float高度超出父元素容器区域的问题

box元素为父元素,float元素高度为150,此时,float会超出父元素范围

<div class="box" style="background: blue;border:1px solid red;">
  <div class="float" style="float: left;width: 200px;height: 150px;border: 1px solid #ccc;background: white;">
    I am a floated box!
  </div>
  <p>I am content inside the container.</p>
</div>

利用BFC,使浮动内容和周围的内容等高,给box元素加一个overflow:hidden即可

<div class="box" style="background: blue;border:1px solid red;overflow:hidden">
  <div class="float" style="float: left;width: 200px;height: 150px;border: 1px solid #ccc;background: white;">
    I am a floated box!
  </div>
  <p>I am content inside the container.</p>
</div>

BFC是什么

通过上面两个例子,我们会很好奇,为什么加个overlfow:hidden就能解决问题,BFC 块级格式化上下文到底是什么?

BFC 块级格式化上下文主要和float、clear、margin塌陷问题有关联

一般情况下BFC只存在于根级元素(html),但设置某些CSS属性时也会让产生BFC。但是前提是必须是块级元素。

以下属性声明会产生BFC:

BFC布局规则

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats don't affect the layout of the content inside other block formatting contexts, and clear only clears past floats in the same block formatting context. Margin collapsing also occurs only between blocks that belong to the same block formatting context.

块格式化上下文对浮动定位(参见 float)与清除浮动(参见 clear)都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠(Margin collapsing)也只会发生在属于同一BFC的块级元素之间。

参考