什么是BFC

꧁薇博꧂

于 2020-08-31 00:51:35 发布

阅读量166

点赞数

本文链接：https://blog.csdn.net/PJW_WYB/article/details/108313880

版权

BFC的概念

BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是 W3C CSS 2.1 规范中的一个概念

BFC中的元素的布局是不受外界的影响，并且在一个BFC中，块盒与行盒都会垂直的沿着其父元素的边框排列
2.BFC布局规则

在BFC下，内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box
的margin会发生重叠
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此。
BFC的区域不会与float box重叠。
计算BFC的高度时，浮动元素也参与计算

3.如何触发 BFC

触发 BFC 的条件如下：

浮动元素，float 除 none 以外的值
加粗样式
绝对定位元素，position（absolute，fixed）

display 为以下其中之一的值inline-block, table-cell, table-caption, flex,
inline-flex

overflow 除了 visible 以外的值（hidden，auto，scroll）

BFC的应用场景

1、自适应两栏布局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

2、清除浮动

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
        overflow:hidden;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

3、防止垂直 margin 重叠

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

꧁薇博꧂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是BFC

BFC的概念BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是 W3C CSS 2.1 规范中的一个概念BFC中的元素的布局是不受外界的影响，并且在一个BFC中，块盒与行盒都会垂直的沿着其父元素的边框排列2.BFC布局规则在BFC下，内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(
复制链接

扫一扫