盒子模型塌陷？什么是BFC?

叫兽~~

已于 2023-07-11 23:49:59 修改

阅读量1.2k

点赞数

文章标签： css html javascript

于 2022-04-29 20:07:43 首次发布

本文链接：https://blog.csdn.net/m0_55557411/article/details/124503156

版权

一、盒子模型塌陷的定义

当子元素设置了外边距，就会导致父元素连带向下，就会导致盒子模型塌陷。

例：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
        }
</style>

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

二、解决方案：

1、方案一：

(1)、给父容器设置上边线。

border-top: 1px saddlebrown solid;

.div1{
    width: 300px;
    height: 300px;
    background-color: pink;
    border-top: 1px saddlebrown solid;
}

(2)、给父元素设置上内边距

padding-top: 1px;

.div1{
    width: 300px;
    height: 300px;
    background-color: pink;
    padding: 1px;
}

(3).给父元素设置超出部分隐藏属性

overflow: hidden

 .div1{
     width: 300px;
     height: 300px;
     background-color: pink;
     overflow: hidden;
  }

2、方案二：使用BFC

(1)、什么是BFC?

BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。

(2)、特性？

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC是一个独立的容器，内部元素不会影响容器外部的元素。

属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。

        .box{
            width: 400px;
            height: 200px;
            background-color: pink;
            overflow: hidden;
        }
        .box1{
            margin-bottom: 20px;  /* 下边距20 */
            width: 200px;
            height: 50px;
            background-color: rgb(192, 183, 202);
        }
        .box2{
            margin-top: 30px;  /* 上边距30 */
            width: 200px;
            height: 50px;
            background-color: rgb(192, 183, 202);
        }

/* 两子元素上下间隔，实际为30px */

    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

(3)、怎么使用(触发)BFC?

overflow: hidden

 .div1{  // 父元素
     width: 300px;
     height: 300px;
     background-color: pink;
     overflow: hidden;  // 解决上述塌陷问题
  }

display: inline-block
position: absolute
position: fixed
display: table-cell

(4)、BFC能解决的问题

解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题

        .continer{
            width: 900px;
            background: black;
            overflow: hidden;
        }

        .box1{
            height: 300px;
            width: 300px;
            background: red;
            float: left;
        }

        .box2{
            height: 300px;
            width: 300px;
            background: blue;
            float: left;
        }

    <div class="continer">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>