CSS3_BFC（十二）

Justinc.2024-11-24 14:39

BFC

MDN对BFC的解释：块格式化上下文（Block Formating Context, BFC）是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

1、开启BFC

flow-root对内容的影响是最低的，但是IE浏览器不支持。

根元素
浮动元素
绝对定位、固定定位的元素
行内块元素
表格单元格：table、thead、tbody、th、td、tr、caption
overflow的值不为visible的块元素
伸缩元素
多列容器
column-span为all的元素（即使该元素没有包裹在多列容器中）
display的值，设置为flow-root

2、BFC作用

元素开启BFC后，其子元素不会再产生margin塌陷问题；
元素开启BFC后，自己不会被其他浮动元素所覆盖；
元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷。

3、mrgin塌陷的解决

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        body {
            display: flex;
        }

        .outer {
            width: 500px;
            background-color: aqua;

            /* 浮动元素 */
            /* float: left; */
            /* 开启定位元素 */
            /* position: relative; */
            /* 行内块元素 */
            /* display: inline-block; */
            /* 表格单元格 */
            /* display: table; */
            /* overflow不为visible */
            /* overflow: hidden; */
            /* 多列容器 */
            /* column-count: 1; */

            /* column-span: all; */
            /* display: flow-root; */
        }

        .inner {
            height: 200px;
            width: 200px;
            margin: 20px;
        }

        .inner1 {
            background-color: yellow;
        }

        .inner2 {
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
    </div>
</body>

</html>