BFC布局相关

最新推荐文章于 2022-04-24 01:09:25 发布

哈哈ha~

最新推荐文章于 2022-04-24 01:09:25 发布

阅读量97

点赞数 1

分类专栏：前端开发课程文章标签： css css3 前端 html5 html

本文链接：https://blog.csdn.net/qq_56668869/article/details/124272459

版权

前端开发课程专栏收录该内容

37 篇文章 1 订阅

订阅专栏

1.概念：

BFC：Block Formatting Context 直译为"块级格式化上下文"
它是一个独立的渲染区域只有Block-level box参与
它规定了内部的Block-level Box如何布局并且与这个区域外部毫不相干

2.触发BFC：

根元素 html
浮动元素(元素的float不是none)
定位元素(元素的position为absolute或fixed)
display为inline-block、table-cell、table、inline-table、flex、grid或inline-grid
overflow值不为visible的块元素
多列容器(元素的column-count或column-width不为auto，包括column-count为1)

3.布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

4.主要用途：

（1）清楚元素内部浮动

把父元素设为BFC即可清理子元素的浮动
最常见的用法就是在父元素上设置overflow: hidden样式

（2）解决外边距合并问题

盒子垂直方向的距离由margin决定属于同一个BFC的两个相邻盒子的margin会发生重叠
为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响
或一个设置margin 一个设置padding

 <!-- 把两个div包裹在两个不同container容器中，用over-hidden触发container的BFC -->
    <style>
        .one,
        .two {
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin: 100px;
        }

        .container {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="one"></div>
    </div>
    <div class="container">
        <div class="two"></div>
    </div>
</body>

（3）阻止元素被浮动元素覆盖

给一个元素添加浮动属性后覆盖了另一个元素若要取消覆则触发被覆盖元素的BFC属性

 <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: red;
            overflow: hidden; /* 触发BFC */

        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>