BFC布局

Posted 2021-03-07 lijianming180

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BFC布局相关的知识，希望对你有一定的参考价值。

BFC(块级格式化上下文)

是web页面的可视化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布局规则

作用

自适应的两栏布局
可以阻止元素被浮动元素覆盖
可以包含浮动元素——清除内部浮动
分属不同的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>

以上是关于BFC布局的主要内容，如果未能解决你的问题，请参考以下文章