目录
前言
又到了巩固前端基础的时间，记录BFC概念、触发条件以及一些用BFC作为解决方案的常见案例。
BFC概念
官方解释：块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
我们可以把它想象成一个特殊属性或者技能，触发了BFC的元素：
会拥有一个独立的布局空间，不会受到外界影响。
能够在布局时考虑到浮动元素与其交互，不会被浮动元素影响布局。
如何触发BFC
极为常见必须记住的：
Html根标签本身触发BFC。
开启了浮动的元素触发BFC，也就是float属性设置为非none（默认值是none）。
设置overflow的元素触发BFC，也就是overflow属性设置为非visible（默认值是visible）
设置绝对定位与固定定位的元素触发BFC，也就是position属性设置为absolute或者fixed。
设置了弹性盒或行内块元素的元素，也就是display属性设置为flex或者inline-block。
官方的全部触发条件：
BFC使用场景
父元素塌陷
出现原因是因为一个普通的元素没有设置高度，当它体内的元素全部浮动时，父元素的高度没有元素撑起，就塌陷了。
<style> #box1 { border: 5px solid red; background-color: aquamarine; width: 500px; } #box2 { border: 5px solid yellow; background-color: aqua; height: 50px; width: 250px; float: left; } </style> <body> <div id="box1"> <div id="box2"></div> </div> </body>
我们知道BFC元素布局时可以考虑到浮动元素，因此我们可以将box1触发BFC。
<style> #box1 { border: 5px solid red; background-color: aquamarine; width: 500px; /*设置overflow为非visible*/ overflow: hidden; /*有兴趣可以试试设置行内元素*/ /*display: inline-block;*/ /*或者设置浮动*/ /*float: left;*/ } </style>
外边距重叠
两个同级元素，上面的元素设置下边距30px，下面的设置上边距40px，我们本来希望它是70px的间距，可是因为外边距重叠，只保留了最大的间距40px。
<style> #box1 { border: 5px solid red; background-color: aquamarine; width: 500px; height: 50px; margin-bottom: 30px; } #box2 { border: 5px solid yellow; background-color: aqua; height: 50px; width: 250px; margin-top: 40px; } </style> <body> <div id="box1"></div> <div id="box2"></div> </body>
我们想要触发BFC的元素内部布局不会受到外部影响，因此我们想到可以创造一个BFC元素将其中一个元素包括在它体内，就不会被另一个元素影响了。
<body> <div id="box1"></div> <div id="bfc" style="overflow: hidden"> <div id="box2"></div> </div> </body>
浮动元素与普通元素重叠
因为box1浮动了，因此box2就和box1重叠在一起了。
<style> #box1 { border: 5px solid red; background-color: aquamarine; width: 500px; height: 50px; float: left; } #box2 { border: 5px solid yellow; background-color: aqua; height: 80px; width: 250px; } </style> <body> <div id="box1">box1</div> <div id="box2">box2</div> </body>
与解决高度塌陷同理，触发了BFC就不怕浮动影响了，因此我们给box2触发BFC。
<style> #box2 { border: 5px solid yellow; background-color: aqua; height: 80px; width: 250px; /*设置*/ overflow: hidden; } </style>
尾言
如果觉得文章还不错的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~
