BFC

最新推荐文章于 2022-09-16 20:06:23 发布

落幕高墙

最新推荐文章于 2022-09-16 20:06:23 发布

阅读量170

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/p13132312312/article/details/101599796

版权

前端专栏收录该内容

40 篇文章 0 订阅

订阅专栏

一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

BFC 特性(功能)

先明确一下bfc的作用

其中比较重要的几点就是：

1.触发bfc的区域，会隔离开其他区域，使 BFC 内部浮动元素不会到处乱跑。

2.bfc会把他里面的float元素的高度囊括进来计算，重新计算父元素的高度。

【这一条是从第一条衍生出来的，为什么？】

【一个浮动的元素，然后父div没有设置bfc，相当于父元素高度为0（因为浮动子元素脱离文档流，无法撑开父元素的高度），如果父元素后面还有其他的元素，那么父元素的高度为0的话，会影响其他元素的布局排版，如果我们给父元素搞了一个bfc的话，就是从父元素内部产生一个bug，那么bfc会作用在父元素里面，那么这个父元素因为buf的作用，隔离开自己的这个区域对其他区域的影响，那么它就不得不把子元素囊括进来，并且给一个高度，这样就变形逼迫父元素重新计算内部的float元素的高度了】

触发bfc：

bfc解决两个经典问题

一.外边距重叠

两个盒子都设置了外边距

但是它们外边距并不会取和，而是取最大值

我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。并且给该容器加上一个overflow:hidden，使得该容器产生一个bfc。这样就会隔开两个原本margin重叠的元素了。

两个相邻Box垂直方向margin重叠

<style>

p {

color: #f55;

background: #fcc;

width: 200px;

line-height: 100px;

text-align:center;

margin: 100px;

}

</style>

<body>

</body>

两个p之间的距离为100px，发送了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。

我们给其中一个p套上一个div，这样就可以使得这个p元素产生bfc（准确来说是p的父容器的元素产生的bfc），从而消除外边距重叠。

代码：

<style>

.wrap {

overflow: hidden;// 新的BFC

}

p {

color: #f55;

background: #fcc;

width: 200px;

line-height: 100px;

text-align:center;

margin: 100px;

}

</style>

<body>

</div>

</body>

二.相邻Box水平方向margin重叠

<!doctype HTML>

<html>

<head>

#green {

margin:10px 10px 10px 10px

}

#blue {

margin:10px 10px 10px 10px

}

#red {

margin:10px 10px 10px 10px

}

body {

writing-mode:tb-rl;

}

</style>

</head>

<body>

</body>

</html>

可以看到水平方向的margin发生了重叠。

三.父元素高度坍塌

父元素坍塌，简单来说就是，父元素无法计算浮动子元素的高度。

如下图:

float导致父元素坍塌了,其实下面的解决之道就是给父元素加上一个overflow:hidden即可

触发bfc之后，父元素为了隔绝其他区域对自身区域的影响【或者自身区域对其他区域的影响】，那么bfc会把父元素包含的4个浮动元素囊括进来，并计算他们的高度，然后重新设置自己的高度，这样才不会影响到后面的盒子。

四.嵌套元素边距重叠问题

假设现在你想要这样一种效果：

子元素需要顶住父元素，向里面缩进100px，然后父元素需要顶住绿色（屏幕），10px。

具体效果如下：

原因就是父子元素的边框重叠了之后，就会有这个bug，我们可以设置一下子元素的border为1px，或者给父元素设置border，或者父子元素都设置上，这样不会和父元素的边框完全重叠，即可消除这个bug。

另外一种解决的办法就是给父元素设置bfc

1.让父元素产生bfc，这样子元素就会被限制在父元素里面，

子元素的外边距就无法触达到外面，那么外面就只会剩下父元素的外边距了，自然就消除了bug

2.让子元素产生bfc是没有效果的，因为子元素产生bfc，子元素的位置还是回位于父元素的顶部，加了bfc子元素只是会把自己内部隔绝起来，不影响其他人。所以子元素的位置不变，既然子元素位置不变，那么子元素的外边距

会伸到外面，伸到外面，又和父元素的外边距重叠了，bug出现

五.两栏布局问题

如下图:

绿色浮动，黄色为块级标签

那么黄色的文字会环绕绿色的div

如何把绿色和黄色隔开呢？

简单，直接给黄色div触发bfc，bfc就会隔离开与绿色的纠缠

如下图：黄色就隔离开了

可以用下面三种方案:

总的来说就是:

左边不动，右边设置外边距

左右都为绝对定位，右边宽度100%

总结：

1.清除浮动

2.两栏布局文字环绕问题

3.垂直方向外边距重叠

4.水平方向外边距重叠

5.嵌套元素外边距重叠

落幕高墙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC

一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。BFC 特性(功能)先明确一下bfc的作用其中比较重要的几点就是：1.触发bfc的区域，会隔离开其他区域，使 BFC 内部浮动元素不会到处乱跑。2.bfc会把他里面的float元素的高度囊括进来计算，重新计算父...
复制链接

扫一扫