BFC详解

最新推荐文章于 2024-03-29 16:49:37 发布

温清夜

最新推荐文章于 2024-03-29 16:49:37 发布

阅读量434

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： BFC CSS

本文链接：https://blog.youkuaiyun.com/qq_37288477/article/details/86935646

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文深入解析了块级格式化上下文(BFC)的基本概念及布局规则，包括内部Box的垂直排列方式、margin重叠处理、BFC与浮动元素的关系等，并介绍了如何创建BFC以及其在防止margin重叠、实现两栏布局和清除浮动等场景的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BFC的基本概念

块级格式化上下文

BFC布局规则=>BFC的原理（渲染原理）

1.内部的Box会在垂直方向上一个接一个放置
2.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的Box的margin会发生重叠。
3.每个元素的margin box的左边，与包含块border box的左边相接触
4.BFC的区域不会与float box重叠
5.BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
6.计算BFC的高度时，浮动元素也会参与计算

怎么创建BFC

float的值不为none
overflow的值不为visibled(hideen scroll auto inherit)
display的值为inline-block,table-cell,table-caption,flex,inline-flex
position的值为absolute或者fixed

BFC的使用场景

1.防止margin重叠(塌陷)
两个相邻的box垂直方向margin重叠

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

在这里插入图片描述
有规则2知道，属于同一个BFC的相邻两个margin会发生重叠，我们只需要在一个p外面包裹一个BFC容器，就可以！

  <style>
        p {
            color: #f55;
            background: #fcc;
            width: 200px;
            line-height: 200px;
            text-align: center;
            margin: 100px;
        }
        
        .warper {
            overflow: hidden;
        }
    </style>
    <div class="warper">
        <p>温清夜</p>
    </div>
    <p>温清夜</p>

在这里插入图片描述
2 两栏布局，左边固定，右边自适应

   <style>
        .left {
            width: 200px;
            height: 100px;
            background: red;
            float: left;
        }
        
        .right {
            height: 110px;
            background: yellow;
        }
    </style>

    <div class="left"></div>
    <div class="right"></div>

在这里插入图片描述

通过上图你会发现，右边的布局内容和左边的浮动部分重叠在了一起！根据规则可知，BFC容器和浮动元素不必发生重叠，所以我们可以在右边的元素中设置BFC

 <style>
        .left {
            width: 200px;
            height: 100px;
            background: red;
            float: left;
        }
        
        .right {
            height: 110px;
            background: yellow;
            overflow: hidden;
        }
    </style>

    <div class="left"></div>
    <div class="right"></div>

在这里插入图片描述
3 BFC清除浮动

  <style>
        .parent {
            border: 1px solid black;
           
        }
        
        .child {
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
        }
    </style>

    <div class="parent">
        <div class="child"></div>
    </div>

在这里插入图片描述
计算BFC的高度时，浮动元素也会参与计算,设置父元素为BFC

  <style>
        .parent {
            border: 1px solid black;
            overflow: hidden;
        }
        
        .child {
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
        }
    </style>

    <div class="parent">
        <div class="child"></div>
    </div>

在这里插入图片描述