BFC概述

橘猫吃不胖～

已于 2024-04-21 23:57:09 修改

阅读量1k

点赞数 24

分类专栏： CSS 文章标签： css

于 2024-01-21 19:59:29 首次发布

本文链接：https://blog.csdn.net/m0_46612221/article/details/135733492

版权

CSS 专栏收录该内容

24 篇文章 7 订阅

订阅专栏

BFC概述

1 什么是BFC
2 BFC与流体布局
3 overflow 最佳结界

1 什么是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、flex、grid
position的值不为relative和static

2 BFC与流体布局

BFC的结界特性最重要的用途是实现更健壮、更智能的自适应布局。

比如说下面这个例子：

<div class="father">
  <img src="xxxxx"/>
  <p class="son">今天天气真好，今天天气真好，今天天气真好,今天天气真好,今天天气真好今天天气真好今天天气真好</p>
</div>

img {
  float: left;
  width: 100px;
}

上面这段代码的效果图如下所示，此时.son的内容收到了float属性值的影响，从而呈现出了环绕图片的效果。
在这里插入图片描述
如果此时我们为.son的元素设置具有BFC特性的属性，比如overflow: hidden，根据BFC的表现原则，子元素不会受外部元素影响，也不会影响外部元素，，于是这里的.son元素为了不与浮动元素产生交集，会顺着浮动边缘形成自己的封闭上下文，如下所示：

.son {
  overflow: hidden;
}

在这里插入图片描述
这就说明，普通流体元素在设置了overflow: hidden后，会自动填满容器中除了浮动元素之外的剩余空间，形成自适应布局的效果，而且这种自适应布局要比纯流体自适应更加智能。比方说，我们让图片的尺寸变小或变大，右侧自适应内容无须更改任何样式代码，都可以自动填满剩余的空间。

和基于纯流体特性实现的两栏或多栏自适应布局相比，基于BFC特性的自适应布局有如下优点：

自适应内容由于封闭而更健壮，容错性更强。
自适应内容自动填满浮动以外区域，无须关心浮动元素宽度，可以整站大规模应用。

理论上，任何BFC元素和float元素相遇的时候，都可以实现自动填充的自适应布局。但是，由于绝大多数的触发BFC的属性自身有一些古怪的特性，所以，实际操作的时候，能兼顾流体特性和BFC特性来实现无敌自适应布局的属性并不多。

float:left。浮动元素本身BFC化，然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性，因此，无法用来实现自动填满容器的自适应布局。不过，其兼容性良好，开创了“浮动布局”。
position:absolute。这个属性脱离文档流有些严重。
overflow:hidden。其本身是一个很普通的元素，因此，块状元素的流体特性保存得相当完好，而且overflow:hidden的BFC特性兼容性很好。唯一的问题就是容器盒子外的元素可能会被隐藏掉，一定程度上限制了这种特性的大规模使用。
display:inline-block。它会让元素尺寸包裹收缩，不符合我们想要的block水平的流动特性。然而，IE6和IE7浏览器下，block水平的元素设置display:inline-block元素还是block水平，也就是还是会自适应容器的可用宽度显示。
display:table-cell。其让元素表现得像单元格一样，它会跟随内部元素的宽度显示，但是，单元格有一个特性，宽度值设置得再大，实际宽度也不会超过表格容器的宽度。因此，如果我们把display:table-cell这个BFC元素宽度设置得很大，比方说3000px，那其实就跟block水平元素自动适应容器空间效果一模一样了。
display:table-row。对width无感，无法自适应剩余容器空间。

总结一下，能担任自适应布局重任的也就是以下几个：

overflow:auto/hidden，适用于IE7及以上版本浏览器
display:inline-block，适用于IE6和IE7
display:table-cell，适用于IE8及以上版本浏览器

3 overflow 最佳结界

overflow属性指定了块容器元素的内容溢出时是否需要裁剪，也就是“结界”只是其衍生出来的特性，“剪裁”才是其本职工作。

3.1 剪裁界线border box

一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，例如：

<div class="box">
  <img src="xxx" alt="">
</div>

.box {
  width: 200px;
  height: 80px;
  padding: 10px;
  border: 10px solid black;
  overflow: hidden;
}

则当子元素内容超出容器宽度高度限制的时候，剪裁的边界是border box的内边缘，而非padding box的内边缘。
在这里插入图片描述

3.2 overflow-x和overflow-y

overflow-x和overflow-y，分别表示单独控制水平或垂直方向上的剪裁规则，支持的属性值和overflow属性一模一样。

这种相似性很容易让大家产生一个误区，认为只要overflow-x和overflow-y 设置了上面的属性值，就一定会是这样的表现。实际上overflow-x和overflow-y的表现规则要比看上去复杂些：如果overflow-x和overflow-y属性中的一个值设置为visible而另外一个设置为scroll、auto或hidden，则visible的样式表现会如同auto。换句话说，永远不可能实现一个方向溢出剪裁或滚动，另一方向内容溢出显示的效果。