【CSS】BFC - 块级格式化上下文

时间 2019-11-06

标签 CSS bfc 格式化上下文栏目 CSS 繁體版

原文原文链接

BFC（block formatting context）块级格式化上下文。html

若是一个元素具备 BFC，内部子元素不管如何都不会影响外部的元素。因此，BFC 元素是不可能发生 margin 重叠的，由于 margin 重叠是会影响外面的元素的; BFC 元素也能够用来清除浮动的影响，由于若是不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违 BFC 元素的子元素不会影响外部元素的设定。浏览器

触发BFC的状况有几下几种：布局

<html>根元素;
float 的值不为 none;
overflow 的值为 auto、scroll 或 hidden;
display 的值为 table-cell、table-caption 和 inline-block 中的任何一个;
position 的值不为 relative 和 static。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，而且在一个BFC中，块盒与行盒（行盒由一行中全部的内联元素所组成）都会垂直的沿着其父元素的边框排列。spa

上面几种状况下无须使用 clear:both 属性去清除浮动code

BFC 与流体布局

BFC 的结界特性最重要的用途其实不是去 margin 重叠或者是清除 float 影响，而是实现更健壮、更智能的自适应布局。orm

其优势为：htm

自适应内容因为封闭而更健壮，容错性更强。比方说，内部设置 clear:both 不会与 float 元素相互干扰而致使错位
自适应内容自动填满浮动之外区域，无须关心浮动元素宽度，能够整站大规模应用

所以遇到两栏布局能够使用以下方式：blog

<div class="bfc">
    <img class="left" src="test.jpg">
    <p class="right">你好，你好，你好...</p>
</div>

...

.left { float: left; }
.right { float: right; }
.bfc { overflow: hidden; }

能实现自适应布局的属性有如下几个：ip

overflow：autohidden (适用于IE7及以上)
display:inline-block (适用于IE六、IE7)
display:table-cell (适用于IE8)

利用以上属性可实现两套针对IE7以上的自适应布局：
一、借助overflow文档

.lbf-content { overflow: hidden; }

二、融合 display:table-cell 和 display:inline-block

.lbf-content {
    display: table-cell; 
    width: 9999px; 
    /* 若是不须要兼容 IE7，下面样式能够省略 */       *display: inline-block; *width: auto;
}

以上两种基于BFC的自适应布局均支持无限嵌套，所以，多栏自适应能够经过嵌套方式实现。

最后，关于display:table-cell 元素内连续英文字符没法换行的问题，能够用下面这种方式解决：

.word-break {
      display: table;
      width: 100%;
      table-layout: fixed;
      word-break: break-all;
}

外边距折叠

常规流布局时，盒子都是垂直排列，二者之间的间距由各自的外边距所决定，但不是两者外边距之和。

<div class="container">
  <p>Sibling 1</p>
  <p>Sibling 2</p>
</div>

......

.container {
  background-color: red;
  overflow: hidden; /* creates a block formatting context */
}
p {
  background-color: lightgreen;
  margin: 10px 0;
}

其渲染结果为：

理论上，两个p元素之间的外边距应当是两者外边距之和（20px）但实际上倒是10px，这是外边距折叠(Collapsing Margins)的结果。

折叠的结果按照以下规则计算：

一、两个相邻的外边距都是正数时，折叠结果是它们二者之间较大的值。
二、两个相邻的外边距都是负数时，折叠结果是二者绝对值的较大值。
三、两个外边距一正一负时，折叠结果是二者的相加的和。

产生折叠的必备条件：margin必须是邻接的!

利用 BFC 避免外边距折叠

BFC产生外边距折叠要知足一个条件：两个相邻元素要处于同一个BFC中。因此，若两个相邻元素在不一样的BFC中，就能避免外边距折叠。

<div class="container">
    <p>Sibling 1</p>
    <p>Sibling 2</p>
    <!-- 将第三个元素进行处理，建立新的BFC -->
    <div class="newBFC">
        <p>Sibling 3</p>
    </div>
</div>

......

.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    margin: 10px 0;
    background-color: lightgreen;
}
.newBFC {
    overflow: hidden;  /* creates new block formatting context */
}

结果如图所示：

因为第二个和第三个元素不属于同一个BFC，所以不会发生外边距折叠。

BFC包含浮动

浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。若是一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。咱们一般会利用伪元素(:after或者:before)来解决这个问题。
BFC能包含浮动，也能解决容器高度不会被撑开的问题。

<div class="container">
    <div>Sibling</div>
    <div>Sibling</div>
</div>

......

.container {
  background-color: green;
}
.container div {
  float: left;
  background-color: lightgreen;
  margin: 10px;
}

因为父元素没有高度，内部元素浮动后脱离父元素，解决方式为将父元素变为BFC，解决方式以下：

.container {
    overflow: hidden; //利用overflow：hidden将父元素变为BFC
    background-color: green;
}

多列布局使用BFC

若是咱们建立一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这多是由于浏览器四舍五入了列宽从而全部列的总宽度会超出容器。但若是咱们在多列布局中的最后一列里建立一个新的BFC，它将老是占据其余列先占位完毕后剩下的空间。

<div class="container">
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
</div>

......

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
.column:last-child {
    float: none;
    overflow: hidden; 
}