首页 > 其他分享> 文章详细

BFC学习

2021-10-16 02:00:32 阅读：149 来源： 互联网

标签：BFC root 元素 flow 学习 margin display

1 官方定义

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

2 个人理解

每一个BFC区域只包括其子元素，不包括其子元素的子元素。

每一个BFC区域都是独立隔绝的，互不影响

3 触发bfc

根元素（<html>）
使用float 时其浮动的元素
绝对定位的元素 (包含 position: fixed 或position: sticky
使用以下属性的元素 display: inline-block
表格单元格或使用 display: table-cell, 包括使用 display: table-* 属性的所有表格单元格
表格标题或使用 display: table-caption 的元素
块级元素的 overflow 属性不为 visible ---可能有副作用
元素属性为 display: flow-root 或 display: flow-root list-item --- 无副作用
元素属性为 contain: layout, content, 或 strict
flex items
网格布局元素
multicol containers
元素属性 column-span 设置为 all

4 BFC特性

1、属于同一个BFC的两个相邻容器的上下margin会重叠

改为不是同一个bfc display: flow-root;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 40px;
            background-color: aqua;
        }
        .bfc {
            display: flow-root;
        }
    </style>
</head>
<body>
    <div class="box">margin:40px</div>
    <div class="bfc">
        <div class="box">margin:40px</div>
    </div>
    
</body>
</html>

2、计算BFC高度时浮动元素也参于计算

不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动。

吧父元素改为bfc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            border: 10px solid red;
            display: flow-root;
        }
        .son {
            float: left;
            width: 100px;
            height: 50px;
            border: 10px solid blueviolet;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

3、BFC的区域不会与浮动容器发生重叠-可以左右布局

将right改为bfc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 100px;
            height: 100px;
            float: left;
            background-color: aqua;
        }
        .box2 {
            height: 300px;
            background-color: blueviolet;
            display: flow-root;
        }
    </style>
</head>
<body>
    <div class="box1">left</div>
    <div class="box2">right</div>
</body>
</html>

4、BFC内的容器在垂直方向依次排列

标签：BFC,root,元素,flow,学习,margin,display
来源： https://www.cnblogs.com/tingying/p/15411278.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

BFC学习

1 官方定义

2 个人理解

3 触发bfc

4 BFC特性