BFC(Block formatting context)
（1）概念：
直译为
块级格式化上下文
，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.
· 我理解为：将BFC看成是一种属性，当拥有该属性的元素就相当于一块独立的区域。
（2）实现BFC属性的方法：
1. 浮动元素，float 除 none 以外的值
2. 定位元素，position的值不是static或者relative。
3. display 为 inline-block 、table-cell、table-caption、table、table-row、table-row-group、
table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
4. overflow 除了 visible 以外的值（hidden，auto，scroll）
5. 根元素<html> 就是一个 BFC
（3）BFC的作用
1、避免外边距重叠（防止margin塌陷）
margin塌陷的意思：同时给两个div设置相同的属性，当设置margin为100px，那么两个div之间的间隙应该是margin-bottom+margin-top=200px的外边距，但是没有设置BFC属性，块的上外边距和下外边距会合并为单个边距，取最大值，如果margin相等，则仅为一个，这就是外边距重叠（margin塌陷）。
· 没有设置BFC时两个div之间的外边距
· 通过给其中一个div包裹一个父div，设置BFC属性，来解决margin塌陷的问题
· 代码：
<style>
/* 通过设置overflow:hidden属性，将父容器设置为BFC属性 */
.container {
overflow: hidden;
}
.cube {
width: 100px;
height: 100px;
background-color: blueviolet;
margin: 100px;
}
</style>
</head>
<body>
<!-- 外边距重叠 -->
<div class="container">
<div class="cube"></div>
</div>
<div class="cube"></div>
</body>
· 运行结果：
2、用于清除浮动
· 当给一个父元素设置边框，内部元素会将父元素撑起来，但是如果内部元素设置了 float属性，则该父元素会失去支撑，从而没有高度。
· 设置了浮动属性的子元素，父元素失去支撑
· 通过给父元素设置BFC属性，来实现清除浮动
· 代码：
<style>
/* overflow: hidden;设置该属性，将父元素设置了BFC属性，即实现了清除浮动 */
.parent {
border: 10px solid darkorange;
overflow: hidden;
}
.child {
width: 100px;
height: 100px;
background-color: rgb(63, 190, 80);
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
· 运行结果：
3、阻止元素被浮动元素覆盖
· 当前一个兄弟元素设置了浮动属性时，后一个兄弟元素会跑到前一个兄弟元素的位置去，从而后一个兄弟元素被覆盖。
· 第二个兄弟元素被覆盖的情况
· 通过给被影响的兄弟元素设置BFC属性，来解决被覆盖的情况。
· 代码：
<style>
.cube1 {
width: 100px;
height: 100px;
background-color: darkorange;
float: left;
}
/* 通过给被影响元素设置overflow: hidden;属性，将其设置BFC属性，实现阻止被浮动元素影响 */
.cube2 {
width: 200px;
height: 200px;
background-color: darkgrey;
overflow: hidden;
}
</style>
</head>
<body>
<div class="cube1"></div>
<div class="cube2"></div>
</body>
· 运行结果：
（4）拓展：CSS中常见的定位方案
· 普通流定位
1.元素按照其在HTML中的先后位置至上而下进行布局
2.行内元素水平排列，直至当行被占满然后换行，块级元素则会被渲染为完整的一整行
3.所有元素默认都是普通流定位
· 浮动
元素首先按照普通流的位置出现，然后根据浮动的方向尽可能向左或向右偏移
· 绝对定位
元素整体会脱离普通流，因此绝对定位的元素不会对兄弟元素造成影响
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
