BFC概述

发布时间：2024年01月21日

BFC概述

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="https://img0.baidu.com/it/u=3178506048,1409511029&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/>
  <p class="son">今天天气真好，今天天气真好，今天天气真好,今天天气真好,今天天气真好今天天气真好今天天气真好</p>
</div>

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

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

.son {
  overflow: hidden;
}

在这里插入图片描述
这就说明，普通流体元素在设置了overflow: hidden后，会自动填满容器中除了浮动元素之外的剩余空间，形成自适应布局的效果。

3 一些注意点

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

  1. float:left。浮动元素本身BFC化，然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性，因此，无法用来实现自动填满容器的自适应布局。不过，其兼容性良好，开创了“浮动布局”。
  2. position:absolute。这个属性脱离文档流有些严重。
  3. overflow:hidden。其本身是一个很普通的元素，因此，块状元素的流体特性保存得相当完好，而且overflow:hidden的BFC特性兼容性很好。唯一的问题就是容器盒子外的元素可能会被隐藏掉，一定程度上限制了这种特性的大规模使用。
  4. display:table-cell。其让元素表现得像单元格一样，它会跟随内部元素的宽度显示，但是，单元格有一个特性，宽度值设置得再大，实际宽度也不会超过表格容器的宽度。因此，如果我们把display:table-cell这个BFC元素宽度设置得很大，比方说3000px，那其实就跟block水平元素自动适应容器空间效果一模一样了。
文章来源:https://blog.csdn.net/m0_46612221/article/details/135733492
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章