请问老师一个BFC解决高度塌陷的问题

来源：3-12 BFC块级格式化上下文

LyaN98

2021-09-15

图片描述

页面存在这四个盒子，给蓝色盒子添加左浮后，灰色大盒子会填充上去，这时包含前三个元素的一个大盒子高度也同时塌陷。这时我使用BFC来解决高度塌陷问题，在父盒子上给了一个 overflow: hidden 来触发BFC，但是父盒子的高度并没有得到恢复。

图片描述

写回答

1回答

西门老舅

2021-09-16

同学你好，BFC表示一个独立的渲染区域，不管内部怎么折腾，都不影响到外面。所以当内部有元素浮动的情况下，BFC容器高度是会计算内部浮动元素的高度，形成撑开BFC容器的效果，从而不影响到外面。BFC容器是作用到容器身上的，并不会对内部的子元素进行清除浮动，所以内部还是会出现叠加的情况，只不过BFC容器是不会让浮动的元素溢出容器，去影响到外面的元素。

前端内功修炼 5大主流布局系统进阶

前端内功修炼：5大主流布局系统进阶

758 学习 · 231 问题

查看课程

相似问题

如何解决图片裁剪的问题

回答 1

关于 iconfont 和文字垂直对齐总是会偏移几个像素的问题

回答 2

关于 css 样式实际高度误差的问题

回答 1

请教老师一个webpack中vue-loader热重载的问题

回答 1

这里的高度是谁决定的？

回答 1

打开慕课网App查看更多内容