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

最新推荐文章于 2024-05-23 17:28:48 发布

木头房子的格子铺

最新推荐文章于 2024-05-23 17:28:48 发布

阅读量2.1k

点赞数 1

分类专栏： web前端某个知识点整理文章标签： css

本文链接：https://blog.csdn.net/mutouafangzi/article/details/76566113

版权

web前端某个知识点整理专栏收录该内容

6 篇文章 0 订阅

订阅专栏

开启BFC实验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            background-color: pink;
            /*height: 200px;*/
            width: 300px;

            /*开启BFC的方法*/
            /*一、开启父元素的同方向浮动；那么父元素和子元素一起脱离了文档流，
            父元素下面的同级元素依旧会上移，但是父元素也算是有了高度！这个高度和子集元素高度一致！*/
            /*float: left;*/

            /*二、设置父级元素为绝对定位或者固定定位，和设置浮动的效果一样。*/
            /*position:absolute;*/

            /*三、设置父级元素的display为incline-block，也就是将父级元素变成了行内块级元素？？？？？脱离文档流？？？
            父元素下面的同级元素会在原本文档流中的位置下些许下移，考虑是由于变成了块级元素导致两个块级元素导致？？？
            父级元素的高度被子级元素撑开了！
            设置成：display:block;就不行！
            */
            /*display:inline-block;*/

            /*四、设置父级元素的overflow非默认属性：
           父级元素会被子元素撑开,高度就是子元素的高度;
           父元素下面的同级元素不会上移。*/
            /*overflow:hidden;*/

            /*五（未开启BFC，但是解决了高度塌陷问题！）、设置父元素的高度，这种方法照成的结果和开启overflow的结果一致；但是本质应该是不相同的。*/
            /*height: 100px;*/
        }

        /*六、给塌陷的父级元素的最后添加一个元素，使该元素清除浮动，呈现块级样式。也可解决高度塌陷问题！*/
        /*.box1:after{*/
            /*content: '';*/
            /*display: table;*/
            /*clear: both;*/
        /*} */






        .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>