CSS进阶（2）- 块级格式化上下文

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

块级格式化上下文

BFC：block formatting context
它是一块独立的渲染区域。它规定了在该区域中，常规流块盒的布局

常规流块盒的布局的一些规则

• 常规流块盒在水平方向上，必须撑满包含块
• 常规流块盒在包含块的垂直方向上依次摆放
• 常规流块盒若外边距无缝相邻，则进行外边距合并
• 常规流块盒的自动高度和摆放位置，会无视浮动元素
  （常规流块盒无论摆在哪，还是说高度自动时，会无视浮动元素，更加会无视定位元素，如绝对定位）

BFC渲染区域

这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：

1. 根元素

   • 意味着，元素创建的BFC区域，覆盖了网页中所有的元素

2. 浮动和绝对定位元素

   • float / position:absolute;

3. overflow不等于visible的块盒

   • overflow: ;(不为visible)

BFC的独立性

• 不同的BFC区域，它们进行渲染时互不干扰
• 创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

BFC的具体规则

1. 创建BFC的元素，它的自动高度需要计算浮动元素
2. 创建BFC的元素，它的边框盒不会与浮动元素重叠
3. 创建BFC的元素，不会和它的子元素进行外边距合并

1. 创建BFC的元素，它的自动高度需要计算浮动元素

test1.html

创建了BFC也可以解决高度坍塌的问题

.container {
    background: lightblue;
    /* 方法（一） */
    /* position: absolute; */
    /* 方法（二） */
    /* float: left; */
    /* 方法（三）副作用最小的方式 */
    /* overflow: hidden; */
    /*只要不是visible，建议hidden*/
}

/* 方法（三）与最建议的方法的改写 */
/* .clearfix {
    overflow: hidden;
} */

/* 最建议的方法 */
/* .clearfix::after {
    content: "";
    display: block;
    clear: both;
} */

2. 创建BFC的元素，它的边框盒不会与浮动元素重叠

test2.html

可以用于实现左边栏固定，右边自适应效果

3. 创建BFC的元素，不会和它的子元素进行外边距合并

test3.html

处在不同bfc中的子元素，它的外边距不会合并

可以解决外边距合并问题

其他

绝对定位，固定定位元素完全脱离了常规流，自动高度不会不会计算它们

参考资料

1. 【渡一教育】袁进老师的html+css基础课程
2. 【渡一教育】袁进老师相关课程源代码