BFC简述

最新推荐文章于 2024-05-26 21:12:32 发布

cy.plus

最新推荐文章于 2024-05-26 21:12:32 发布

阅读量984

点赞数 2

文章标签： javascript css css3

本文链接：https://blog.csdn.net/weixin_46953330/article/details/123528203

版权

BFC（块级格式化上下文）是CSS布局中的关键概念，用于创建独立的渲染区域。了解BFC的布局规则，如内部元素垂直放置、margin重叠等，可以帮助解决布局问题。BFC可以通过特定条件触发，例如设置`overflow:hidden`。在实际应用中，BFC可以避免margin重叠，清除浮动影响，以及实现自适应布局。掌握这些技巧能更好地控制页面元素的排列和样式。

摘要由CSDN通过智能技术生成

一、什么是BFC？

BFC（块级格式化上下文），它是一个独立渲染区域，它的内部布局不受外部元素的影响。

二、BFC的布局规则

内部的盒子会在垂直方向上一个接一个放置。
每个元素的左外边距都会与包含块的左边界相接。
同一个BFC中的两个盒子margin会发生重叠，不论方向。
BFC区域不会与float元素发生重叠。
计算BFC高度时，浮动子元素也参与计算。
BFC是一个独立区域，内外不互相影响。

三、BFC触发条件

float不为none
overflow不为visible
position不为static和relative
display为inline-block，table-cell，flex，inline-flex

四、应用场景

1.避免margin重叠

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

</body>

在这里插入图片描述
上图可看出同一个BFC中的元素发生了margin折叠，所以我们需要将其中一个元素用div包起来，使其形成一个新的BFC。

<style>
        .all{
          overflow: hidden;  
        }
         p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
    </style>
</head>
<body>
        <p>1</p >
        <div class="all">
            <p>2</p>
        </div>

</body>

在这里插入图片描述

2.清除浮动

   <style>
        .par {
        border: 5px solid rgb(145, 0, 0);
        width: 300px;
    }
 
    .child {
        border: 5px solid rgb(38, 168, 219);
        width:100px;
        height: 100px;
        float: left;
    }
    </style>
</head>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>

</body>

在这里插入图片描述
因为BFC在计算高度时，浮动元素也会参与，所以将父元素设为一个单独的BFC。

<style>
        .par {
        border: 5px solid rgb(145, 0, 0);
        width: 300px;
        overflow: hidden;
    }
 
    .child {
        border: 5px solid rgb(38, 168, 219);
        width:100px;
        height: 100px;
        float: left;
    }
    </style>
</head>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>

</body>

在这里插入图片描述

3.实现自适应布局

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

在这里插入图片描述
每个元素的左外边距与包含块的左边界相接触，因此我们需要触发main元素生成新的BFC。

 .main {
        height: 200px;
        background: #fcc;
        overflow: hidden;
    }

这时候，新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度，和.aside的宽度，自动变窄
在这里插入图片描述

cy.plus

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
BFC简述

一、什么是BFC？BFC（块级格式化上下文），它是一个独立渲染区域，它的内部布局不受外部元素的影响。二、BFC的布局规则内部的盒子会在垂直方向上一个接一个放置。每个元素的左外边距都会与包含块的左边界相接。同一个BFC中的两个盒子margin会发生重叠，不论方向。BFC区域不会与float元素发生重叠。计算BFC高度时，浮动子元素也参与计算。BFC是一个独立区域，内外不互相影响。三、BFC触发条件float不为noneoverflow不为visibleposition不为stat
复制链接

扫一扫