对BFC的总结

最新推荐文章于 2024-04-26 16:58:59 发布

JIGE_Vamos

最新推荐文章于 2024-04-26 16:58:59 发布

阅读量271

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_43601554/article/details/106709665

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是BFC？

一、BFC的定义
二、BFC的布局规则
三、怎么创建BFC
四、BFC的常见作用
五、总结

一、BFC的定义

BFC（Block Formatting Context）全称为块级格式化上下文。简单来说，BFC是一种属性，并且只会作用于Block-level box（块级元素）。设置了这种属性的元素会成为一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

二、BFC的布局规则

属于同一个 BFC 的两个相邻 Box 垂直排列
属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
BFC 中子元素的margin的左边，与父元素(BFC) border box的左边相接触 (子元素 absolute 除外)
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
文字层不会被浮动层覆盖，环绕于周围

三、怎么创建BFC

根元素
position: absolute/fixed
display: inline-block / table
float 浮动
overflow：hidden

四、BFC的常见作用

1. 给两个相邻盒子中的一个包裹上BFC容器，解决他们垂直方向的margin会发生重叠的问题

下面这个例子中两个相邻 Box 的 margin 会发生重叠：

<style>
    *{
        margin: 0;
        padding: 0；
    }
    .top, .bottom{
        margin: 100px;
    }
    .top{
        width: 100px;
        height: 100px;
        background: red;

    }
    .bottom{
        width: 100px;
        height: 100px;
        background: dodgerblue;
    }
</style>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>

在这里插入图片描述

解决方案：
给第二个盒子包裹上BFC容器解决他们垂直方向的margin会发生重叠的问题
对应处于 BFC 内部的元素与外部的元素相互隔离的规则

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .top, .bottom{
        margin: 100px;
    }
    .top{
        width: 100px;
        height: 100px;
        background: red;
    }
    .bottom{
        width: 100px;
        height: 100px;
        background: dodgerblue;
    }
    .father{
        overflow: hidden;
    }
</style>
<body>
    <div class="top"></div>
    <div class="father">
        <div class="bottom"></div>
    </div>
</body>

在这里插入图片描述

2. 清除内部元素的浮动，使父元素的高度可以被浮动元素撑起

下面这个例子中，为子元素设置浮动，父元素发生了高度塌陷：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .father{
        background: red;
        border: 1px solid #000;
    }
    .son{
        width: 200px;
        height: 200px;
        background: blue;
        float: left;
    }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

在这里插入图片描述

解决方案：
给父元素设置BFC
对应第5条计算 BFC 的高度时，浮动子元素也参与计算的规则

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .father{
        background: red;
        border: 1px solid #000;
        overflow: hidden;
    }
    .son{
        width: 200px;
        height: 200px;
        background: blue;
        float: left;
    }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

在这里插入图片描述
3. 使标准流的元素不被浮动元素覆盖

下面这个例子中，浮动流元素会遮盖住标准流元素

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 200px;
        opacity: 0.8;
        background: red;
        float: left;
    }
    .right{
        width: 300px;
        height: 300px;
        background: black;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

在这里插入图片描述

解决方案：给标准流的元素设置BFC
对应第4条BFC 的区域不会与 float 的元素区域重叠

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 200px;
        opacity: 0.8;
        background: red;
        float: left;
    }
    .right{
        width: 300px;
        height: 300px;
        background: black;
        overflow: hidden;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

在这里插入图片描述

扩展：通过这一特点，可以实现自适应两栏布局。

<style>
    *{
        margin: 0;
        padding: 0;
        word-break: break-all;
    }
    .left, .right{
        width: 100px;
        height: 100px;
        background: red;
    }
    .left{
        float: left;
    }
    .right{
        float: right;
    }
    .center{
        height: 100px;
        overflow: hidden;
        background: #20d3ff;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
</body>

在这里插入图片描述

五、总结

以上例子都体现了：
BFC是页面上的一个独立的容器，容器里面的子元素和外面的元素不会相互影响。因此，当BFC外部存在浮动时，不会影响BFC内部的布局，BFC会移动位置或者变窄，而不会与浮动元素有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。

JIGE_Vamos

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对BFC的总结

什么是BFC？一、BFC的定义二、BFC的布局规则三、怎么创建BFC四、BFC的常见作用五、总结一、BFC的定义BFC（Block Formatting Context）全称为块级格式化上下文。简单来说，BFC是一种属性，并且只会作用于Block-level box（块级元素）。设置了这种属性的元素会成为一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。二、BFC的布局规则属于同一个 BFC 的两个相邻 Box 垂直排列属于同一个 BFC 的两个相
复制链接

扫一扫