BFC布局

时间 2020-09-14

标签 bfc 布局繁體版

原文原文链接

BFC(块级格式化上下文)

是web页面的可视化CSS渲染的一部分，是布局过程当中生成块级盒子的区域，也是浮动元素与其余元素的交互区域。css

触发条件

根元素, 即HTML元素
float的值不为none
overflow的值不为visible
display的值为inline-block, table-cell, table-caption
position的值为absolute或fixed

布局规则

内部的box会在垂直方向, 一个接一个地放置(这点就是咱们常见到的块级元素占一行)
box的垂直方向的距离由margin决定, 属于同一个BFC的两个相邻的margin会发生重叠, 与方向无关(垂直方向上的margin重合也就是咱们常说的“坍塌现象”)
每一个元素的margin box的左边, 与包含border box的左边相接触(对于从左往右的格式化, 不然相反). 即便存在浮动也是如此
BFC的区域不会与float box重叠
BFC就是页面上的一个隔壁的独立容器, 容器里面的子元素不会影响到外面的元素. 反之也如此
计算BFC的高度时, 浮动元素也参与计算

对比初学css时的规则

block元素会扩展到与父元素同宽, 因此block元素会垂直排列
垂直方向上两个相邻的DIV margin重叠, 而水平方向上不会(这个说法就不彻底正确)
浮动元素会接近左上方或右上方
为父元素设置overflow: hidden 或浮动元素, 则会包含浮动元素

初学CSS规则背后更深层次的概念其实就是BFC布局规则html

做用

自适应的两栏布局
能够阻止元素被浮动元素覆盖
能够包含浮动元素——清除内部浮动
分属不一样的BFC时能够阻止margin重叠

经过BFC实现两栏布局

1
2
3
4
5
大专栏  BFC布局class="line">6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            height: 100%;
            width: 100%;
        }
        .left {
            float: left;
            height: 200px;
            background-color: aquamarine;
            width: 300px;
            margin-right: 20px;
        }
        .right {
            height: 300px;
            background-color: blueviolet;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>