CSS定位之【BFC】

首先复习一下CSS的几种定位方式

• 普通流：由上至下，行内元素和块级元素按照自己的摆放规则水平或竖直排布，

• 浮动流：在普通流的基础上浮动偏移，一般是左右浮动

• 绝对定位流：整体脱离普通流，元素不占原来位置

📌而BFC属于普通流

---

初识BFC

块格式化上下文，是Web页面可视化渲染CSS的一部分, 是布局过程中生成块级盒子的区域。也是浮动元素与其他元素的交互限定区域。

我们可以把具有BFC的盒子看做一个隔离的独立容器，它改变内部的渲染方式，不会影响外面的布局。

如何触发BFC

引用B站up主 Libra121的视频
https://www.bilibili.com/video/BV1aZ4y1M7gW?from=search&seid=3277206310381695232

BFC的作用

✅解决外边距重叠的问题

当上下的两个盒子，他们的外边距margin都为50px，则两个盒子之间的间隔应该有100px

.demo{
   
	width: 50px;
	height: 50px;
	background-color: cyan;
	margin: 50px;
}

<div class="demo"></div>
<div class="demo"></div>

结果

这是CSS的规范，上外边距和下外边距会合并，数值为取最大值，所以两个50px合并成了一个50px。

💡解决方法：将两个盒子放在两个BFC中

.demo{
   
   width: 50px