前端知识点之BFC

最新推荐文章于 2022-10-27 23:49:42 发布

PrototypeONE

最新推荐文章于 2022-10-27 23:49:42 发布

阅读量459

点赞数

分类专栏：前端知识点文章标签：前端 javascript 学习

本文链接：https://blog.csdn.net/weixin_52263256/article/details/124373813

版权

前端知识点专栏收录该内容

11 篇文章 1 订阅

订阅专栏

BFC

什么是BFC

BFC：Block formatting context，中文块级格式化上下文。

它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC的布局规则

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

如何开启BFC

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

BFC的作用实例

解决子元素float导致的父元素高度塌陷

<!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>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: #000;
            /*BFC*/
            /*overflow: hidden;*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

开启前：
在这里插入图片描述
image-20220421232520502.png)]

开启后：
在这里插入图片描述

解决margin边距重叠问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防止margin重叠</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
    /*BFC*/
    /**
    div{
        overflow:hidden;
    }
    */
</style>
<body>
    <p>看看我的 margin是多少</p>
    <div>
        <p>看看我的 margin是多少</p>
    </div>
</body>
</html>

开启前：
在这里插入图片描述

开启后：
在这里插入图片描述

解决两栏布局的重叠问题

产生原因：每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
        /*BFC*/
        /*overflow:hidden;*/
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

开启前：

在这里插入图片描述

开启后：

/
}

LEFT

RIGHT

```

开启前：

[外链图片转存中…(img-SaJy54LQ-1650733617611)]

开启后：
在这里插入图片描述

PrototypeONE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端知识点之BFC

BFC什么是BFCBFC：Block formatting context，中文块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。BFC的布局规则内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由m
复制链接

扫一扫