css中的高度塌陷以及开启BFC

初始代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script> -->
    <style>
        .box1{
            background-color: pink;
            width: 300px;

           
        }
        .box2{
            height: 300px;
            width: 300px;
            background-color: red;
        }
        .b1{
            background-color: purple;
            width: 100px;
            height: 100px;
            float: left;
        }
        .b2{
            background-color: green;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
   

</head>
<body>

    <div class="box1">
        <div class="b1"></div>
        <div class="b2"></div>
        <div class="clearfix"></div>
    </div>
    <div class="box2"></div>
    

</body>
</html>

未浮动
在这里插入图片描述

b1与b2浮动之后，父元素高度为0，塌陷了
在这里插入图片描述
一、开启父元素的同方向浮动；那么父元素和子元素一起脱离了文档流，
父元素下面的同级元素依旧会上移，但是父元素也算是有了高度！这个高度和子集元素高度一致！

 .box1{
            background-color: pink;
            width: 300px;
              /* 开启BFC的方法 */
            float: left;   
        }

在这里插入图片描述
二、设置父级元素为绝对定位或者固定定位，和设置浮动的效果一样。

 .box1{
            background-color: pink;
            width: 300px;
              /* 开启BFC的方法 */
            position: absolute;   
        }

在这里插入图片描述
三、设置父级元素的display为inline-block，也就是将父级元素变成了行内块级元素
父元素下面的同级元素会在原本文档流中的位置下些许下移
父级元素的高度被子级元素撑开了！

.box1{
            background-color: pink;
            width: 300px;
              /* 开启BFC的方法 */
              display: inline-block;
        }

在这里插入图片描述
四、设置父级元素的overflow非默认属性：
父级元素会被子元素撑开,高度就是子元素的高度;
父元素下面的同级元素不会上移。

.box1{
            background-color: pink;
            width: 300px;
              /* 开启BFC的方法 */
              overflow: hidden;
        }

在这里插入图片描述
五（未开启BFC，但是解决了高度塌陷问题！）、设置父元素的高度，这种方法照成的结果和开启overflow的结果一致；但是本质应该是不相同的

.box1{
            background-color: pink;
            width: 300px;
            height: 200px;
        }

在这里插入图片描述
六、给塌陷的父级元素的最后添加一个元素，使该元素清除浮动，呈现块级样式。也可解决高度塌陷问题！

.box1{
            background-color: pink;
            width: 300px;
        }
        .box1:after{
            content:'';
            display: table;
            clear: both;
        }

在这里插入图片描述

css中的高度塌陷以及开启BFC

猜你喜欢