BFC是什么

一.什么是BFC

这个是 Blocking Formatting Context的缩写。可以理解为一个小的布局(mini layout)。一旦BFC被创建,所有的元素都会被包含在这个小的布局里面

ps: 除了 BFC,还有

  • FFC: Flex Formatting Context
  • GFC: Grid Formatting Context 栅格格式化上下文

通常产生BFC的方式:

  • 使用 overflow方式,不使用 overflow: visible | unset值即可产生一个BFC
  • 浮动的元素可以产生BFC
  • 元素使用了 position: absolute | fixed 可以产生BFC
  • 使用 display: inline-block | table-cell | table-caption可以产生BFC。其中对一个table使用table-celltable-captions会使每一个单元格(cell)都会产生一个BFC
  • 对多列布局使用 column-span: all 会产生一个BFC

使用BFC的好处:

  • 可以包裹BFC中所有的元素
  • BFC可以阻止margins collapsing (margin 合并)

二.示例1 使用overflow创建BFC

html:

<div class="outer">
    <div class="float">浮动元素</div>
    I am text inside the outer box. If there is enough text then the text will wrap around the floated element. The border on the outer will then wrap around the text.
<div>

css部分:

.outer {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}

.float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}

上面的文字部分比较多,产生的结果如下:

#1 BFC 文字比较多.jpg

如果上面的文字部分比较少

html:

<div class="outer">
    <div class="float">浮动元素</div>
    I am text inside the outer box.
<div>

css不变,就会产生如下结果:

#2 BFC 文字比较少的情况.jpg

这是因为浮动元素脱离了正常的文档流导致的,创建一个BFC,使其可以包裹它里面所有的元素, 下面使用overflow: auto | hidden的方式在其父元素上创建一个BFC

.outer {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
  overflow: auto;          // 创建一个BFC
}

.float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}

结果如下

#3 使用overflow auto创建一个BFC.jpg

三.示例2 使用BFC消除margin合并的情况

html:

<div class="outer">
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>
  <p>I am paragraph two and I have a margin top and bottom of 20px;</p>
</div>

css:

.outer {
 background-color: #ccc;
  margin: 0 0 40px 0;
}

p {
  padding: 0;
  margin: 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;
}

由于存在 margin collapse现象,导致 p 标签上面margin和下面margin会被合并,出现下图情况

#4 margin collapse.jpg

使用 overflow: auto创建一个BFC阻止margin合并

.outer {
  background-color: #ccc;
  margin: 0 0 40px 0;
  overflow: auto;    // 创建一个BFC
}

p {
  padding: 0;
  margin: 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;

结果如下:

#5 使用BFC消除margin合并.jpg

四.示例3 BFC阻止内容包裹的行为

我们知道如果一个元素浮动,其相连的文字将包裹这个浮动的元素,我们可以使用BFC组织文字包裹浮动元素

# html
<div class="outer">
    <div class="float">I am a floated element.</div>
    <div class="text">I am text</div>
</div>

# css
.outer {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}

.float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}
#6 文字包裹浮动的元素.jpg

class="text"的文字创建一个BFC,可以阻止其对浮动元素的包裹行为

.outer {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}

.float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}
.text {
  overflow: auto;
}
#7 使用BFC阻止对浮动包裹的行为.jpg

五.创建BFC的新方式: display: flow-root

上面使用overflow: auto创建BFC的方式有几个缺点:

  • 语义化不明确,使用这个来创建BFC基本没有语义性
  • 可能产生一些副作用,比如出现滚动条什么的

于是W3C推出了一个新的属性 display: flow-root,将上面所有 overflow: auto替换为display: flow-root都会产生相同的效果,使用这个属性的缺点就是,当前浏览器的兼容性比较差。

原文链接:

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,150评论 1 91
  • 一、什么是BFC(Block Formatting Context) 写CSS样式时,对一个元素设置css,我们首...
    D调的_coder阅读 155评论 0 1
  • 先前在学习CSS float时,有同学提到了BFC这个词,作为求知好问的好学生,哪里不懂查哪里,那么今天就来研究一...
    这名字真不对阅读 5,601评论 3 20
  • 一、BFC是什么? 它是 Block Formatting Context (块级格式化上下文) 的简称,接下来通...
    莫可可小姐d远方阅读 3,289评论 15 40
  • 建议在PC端阅读本文面向对象:对标题中的概念基本不了解或仅仅听说过名字的人。如果已有一定了解请直接拉到最下看推荐阅...
    粉肠w阅读 323评论 0 0