BFC(块级格式化上下文)

BFC(Block Formatting Context)是CSS布局中的一种概念,用于创建独立的渲染区域。通过设置BFC,可以避免外边距重叠问题,如两个div之间的margin塌陷;同时,BFC也可用于清除浮动,确保父容器包含浮动子元素,防止父元素高度塌陷;此外,BFC还能阻止元素被内部浮动元素覆盖。了解并利用BFC,能有效提升网页布局的可控性和稳定性。

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

 BFC(块级格式化上下文)

可以把BFC理解成一块独立的渲染区域,BFC看成是元素的一种属性,当元素拥有了BFC属性后,这个元素就可以看做一个被隔离的独立容器,容器内的元素不会影响容器外的元素。

BFC的作用

1、避免外边距重叠(防止margin塌陷)

        margin塌陷的意思是,同时给两个div设置相同的margin:100px 0;那么两个div之间的距离应为200px,但是如果没有设置BFC属性,上下两个div外边距之间的外边距会合并为一个边距,去最大值,如果margin相等,则距离仅为一个margin的距离。

没有设置BFC时,两个div之间的外边距

给其中一个div包裹一个父容器,设置BFC属性,可以解决margin塌陷问题

<!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>
        .container{
            overflow: hidden;
        }
        .div1 {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 100px 0;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="div1"></div>
    </div>
    <div class="div2"></div>
</body>

</html>

 2、清除浮动

如果子容器设置浮动,则父容器会失去高度支撑,没有高度

可以通过给父元素设置BFC属性来清除浮动

<!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>
        .container{
            border: solid red 2px;
            overflow: hidden;
        }
        .div1 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="div1"></div>
    </div>
</body>

</html>

3、阻止元素被浮动元素覆盖

一个兄弟元素设置浮动后,会导致该元素被覆盖

 可以通过给被覆盖的元素设置BFC属性解决

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值