前端工程师实战14：高度塌陷的解决方法：开启BFC

最新推荐文章于 2023-02-25 11:53:52 发布

柏舟号

最新推荐文章于 2023-02-25 11:53:52 发布

阅读量193

点赞数

分类专栏： HTML与CSS入门与进阶文章标签： html css html5 css3 web

本文链接：https://blog.csdn.net/qq_26226059/article/details/116405292

版权

HTML与CSS入门与进阶专栏收录该内容

19 篇文章 2 订阅

订阅专栏

大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！

网页的布局

之前的文章我们已经学会了编写一个网页的小组件，那么如何进行将多个写出来的小组件进行网页布局呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        header, main, footer{
            width:1000px;
            margin:0px auto;
        }
        header{
            height:200px;
            background-color:silver;
        }

        main{
            height:400px;
            background-color:#bfa;
        }

        footer{
            height:150px;
            background-color:tomato;
        }
    </style>
</head>
<body>
    <!--网页头部-->
    <header></header>

    <main>

    </main>

    <footer></footer>
</body>
</html>

设置距离:

现在我们设置中间main部分，分为左侧导航栏，中间文章和右侧边框区。

    <main>
        <!--左侧导航-->
        <nav >

        </nav>
        <!--中间文章-->
        <article>

        </article>
        <!--右边边框-->
        <aside>

        </aside>
    </main>

        /*设置左侧导航栏*/
        nav{
            width:200px;
            height:100%;
            background-color:yellow;
        }
        /*设置中间内容*/
        article{
            width:600px;
            height:100%;
            background-color:red;
        }

        aside{
            width:200px;
            height:100%;
            background-color:aquamarine
        }

效果是这样的，为什么写在main标签里面的元素会跑了出去呢？

块元素独占一行，都是垂直排列，所以nav已经把父元素给充满了（因为nav高度是100%）

水平排列，就浮动呗

为main里面的标签都设置为float:left，就会正常了：

现在我想给中间的红色与两侧有空隙，怎么做呢？

设置margin:0 10px;

        /*设置中间内容*/
        article{
            float:left;
            width:600px;
            height:100%;
            background-color:red;
            margin:0px 10px;
        }

发现空隙是出来了，但是右侧内容被挤下去了：

因为我们三个元素宽度想加是等于父元素高度，现在又加上左右边框10px，所以想加起来就不是父元素的宽度了，所以就会被挤下去。

解决方法是两侧元素减少宽度，或者中间减少宽度

所以，网页就是如果想垂直排列，就是直接写div，如果想横向排列，就让里面的元素都浮动，就这么简单

浮动的高度塌陷

中间区域我们高度是写死的，但是如果里面的内容长度是动态的，或者超过写死的高度，就会溢出：

所以，父元素的高度通常是不会写死的，而是根据内容的高度来变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .outer{
            height:auto;
            border:10px red solid;
        }

        .inner{
            width:100px;
            height:100px;
            background-color:#bfa;
        }
    </style>
</head>
<body>
    
    <div class="outer">
        <div class="inner">

        </div>
    </div>
</body>
</html>

我们为父元素outer的高度设置为auto（默认值也是auto），里面的子元素内容多高，父元素的高度就有多高，因为父元素高度是自动的时候，默认就会被子元素内容撑开。但我们为子元素设置浮动,


        .inner{
            width:100px;
            height:100px;
            background-color:#bfa;
            float:left;
        }

发现子元素脱离文档流后，导致父元素的高度丢失了，这就是高度塌陷。

高度塌陷会影响其他元素的布局，丢失高度后，其他元素就会上移。

解决方法：

写死父元素高度
BFC(block firmatting context)块级格式化环境

BFC是css的一个隐含属性，可以为一个元素开启bfc，开启后，该元素会变成一个独立布局区域，和其他的块不同。

开启bfc后特点：
1. 开启bfc元素不会被浮动元素所覆盖
2. 开启bfc元素，子元素和父元素外边距不会重叠
3. 开启bfc后，可以包含浮动的子元素（可以包裹住浮动的子元素）

开启bfc的方法：

①设置元素浮动,这里为了使outer能够包住浮动的元素inner，将outer也设置为浮动（不推荐）

        .outer{
            height:auto;
            border:10px red solid;
            float:left;
        }

可以看出，宽度没有了（因为脱离文档流了嘛），所以都会带来副作用

②将元素设置为行内块元素（不推荐）

        .outer{
            height:auto;
            border:10px red solid;
            /* float:left; */
            display:inline-block;
        }

宽度也没了：

③将元素的overflow设置为一个visible的值

        .outer{
            height:auto;
            border:10px red solid;
            /* float:left; */
            /* display:inline-block; */
            overflow:hidden;
        }

宽高度没有丢失，下面元素也没有上移，所以一般采用这种方式。（overflow:hidden）

高度塌陷：子元素浮动之后，父元素丢失高度

演示

我们对box2设置了overflow:hidden，就相当于对box2开启了bfc（即使overflow是用来处理子元素溢出内容的，看上去好像没有关系，但是他就是开启了bfc）

这就会导致box2不再被box1覆盖

还有。

.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
}
.box3{
    width:200px;
    height:100px;
    background-color:yellow;
    margin-top:100px;
}

<div class="box1">
    
    <div class="box3">
        
    </div>
</div>

我们对box3设置了外边距，连同box1一起会向下移动，因为之前说过的，他们的外边距重叠了，对box3设置外边距相当于给box1设置了外边距。但是我们对box1开启bfc,，子元素和父元素外边距不会重叠

.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
    overflow:hidden;/*开启BFC*/
}

所以就有这个效果：

clear

如果不希望某个元素因为其他元素的浮动而改变自己的位置，可以通过clear属性来清楚浮动元素对当前元素所产生的影响

属性值：

left:清除左侧浮动元素对当前元素的影响
right:请求右侧浮动元素对当前元素的影响
both：清除两侧中影响最大的那侧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1,.box3{
            font-size:30px;
        }
        .box1{
            width:200px;
            height:200px;
            background-color:#bfa;
            float:left;
        }

        .box3{
            width:200px;
            height:200px;
            background-color:orange;
            clear:left;
        }

    </style>
</head>
<body>
    <div class="box1">1</div>
    <!-- <div class="box2"></div> -->
    <div class="box3">3</div>
</body>
</html>

原理：浏览器自动为元素添加一个上外边距。

现在加上box2：

        .box2{
            width: 400px;
            height:200px;
            background-color:yellow;
            float:right;
        }

通过设置box3的clear:left/right/both来看看有什么效果

用clear处理高度塌陷

回顾一下高度塌陷：box1丢失高度

.box1{
    border:10px red solid;
}
.box2{
    width:100px;
    height:100px;
    background-color:#bfa;
    float:left;
}

<div class="box1">
    <div class="box2">
    </div>
    <div class="box3">
        aaa
    </div>
</div>

但我们为box3设置了clear:left后，高度塌陷就没有了，因为他清除了左侧浮动元素的影响（box2），去到了box2的下面，现在box1就可以总是包着子元素（无论box2高度怎么变化）

用clear来解决高度塌陷不会产生副作用，但是box3是“用结构来处理表现”，box3本身没有任何作用。所以从html的结构来说，应该删除box3，可以通伪元素来打到：

.box1::after{
    /*伪元素都是行内元素*/
    display:block;
    content:"";
    clear:both;
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1{
            border:10px red solid;
        }
        .box2{
            width:100px;
            height:100px;
            background-color:#bfa;
            float:left;
        }
        .box1::after{
            display:block;
            content:"";
            clear:both;
        }
    </style>
</head>
<body>
    
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

clearfix

利用上面说道的来解决外边距重叠和高度塌陷：

.clearfix::before,.clearfix::after{
    content:"";
    display:table;
    clear:both;
}

哪里想解决外边距重叠和高度塌陷，就加上这个类就ok：

柏舟号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端工程师实战14：高度塌陷的解决方法：开启BFC

大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！网页的布局之前的文章我们已经学会了编写一个网页的小组件，那么如何进行将多个写出来的小组件进行网页布局呢？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
复制链接

扫一扫