高度塌陷BFCclear

Posted 2021-09-08 冰雪奇缘lb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高度塌陷BFCclear相关的知识，希望对你有一定的参考价值。

高度塌陷问题

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失。
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。
所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理。

举例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>高度塌陷</title>
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
        <div class="div3"></div>
    </body>
    <style>
        .outer{
            border: 10px red solid;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color:#bfa;
            float: left;
        }
        .div3 {
            width: 200px;
            height: 200px;
            background-color: #00FF00;
        }
    </style>
</html>

运行结果：

BFC(Block Formatting Context）块级格式化环境

BFC 是一个css中的一个隐含的属性，可以为一个元素开启 BFC，开启BFC该元素会变成一个独立的布局区域。
元素开启BFC后的特点:
1. 开启BFC的元素不会被浮动元素所覆盖。
2. 开启BFC的元素子元素和父元素外边距不会重叠。
3. 开启BFC的元素可以包含浮动的子元素。

可以通过一些特殊方式来开启元素的BFC:

1. 设置元素的浮动

以上代码父元素加上浮动

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

运行结果：

缺点：这种方式虽然可以解决高度塌陷问题，但是父元素的宽度为子元素的宽度，不是默认的100%宽度。并且依然有元素覆盖的问题

2. 将元素设置为行内块元素

以上代码父元素设置为行内块元素

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

运行结果：

缺点：这种方式虽然可以解决高度塌陷问题和元素覆盖问题，但是父元素的宽度为子元素的宽度，不是默认的100%宽度。

总结：以上两种方式开启BFC解决高度塌陷副作用太大，不推荐使用。

3. 将元素的overflow设置为一个非visible的值

常用的方式为元素设置overflow: hidden开启其BFC以使其可以包含浮动元素。

以上代码父元素设置 overflow: hidden

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

运行结果：

效果非常完美！！！

虽然通过给父元素设置 overflow: hidden 仿佛很完美的解决了高度塌陷问题，但是 overflow: hidden 本身就有内容溢出隐藏的功能，在有涉及内容溢出问题方面会影响页面效果，所以这种解决方式也是有副作用的，只不过比较小，推荐大家使用，有没有完美的解决方案呢？肯定是有的，接着往下看。。

开启BFC的方法有很多，建议使用 overflow: hidden，官网解释：BFC

元素开启BFC后的特点:

1. 开启BFC的元素不会被浮动元素所覆盖。

浮动脱离文档流，覆盖其他元素的问题

举例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
    </body>
    <style>
        .box1{
            width:200px;
            height: 200px;
            background-color:#bfa;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:orange;
        }
    </style>
</html>

运行结果：

开启BFC：

.box2{
	width: 200px;
    height: 200px;
    background-color:orange;
    overflow: hidden;
}

运行结果：

2. 开启BFC的元素子元素和父元素外边距不会重叠。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="box1">
            <div class="box3"></div>
        </div>
    </body>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color:#bfa;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-top: 100px;
        }
    </style>
</html>

运行效果

解决方法

.box1{
	width: 200px;
	height: 200px;
	background-color:#bfa;
	overflow: hidden
}

运行效果：

3. 开启BFC的元素可以包含浮动的子元素。

clear

clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

clear 官网：clear mdn

作用:清除浮动元素对当前元素所产生的影响
可选值:
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧
如果我们不希望某个元素因为其他元素浮动的影响而改变位置，
可以通过clear 属性来清除 浮动元素 对当前元素所产生的影响。
原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距,
以使其位置不受其他元素的影响。

举例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box3"></div>
    </body>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color:#bfa;
            float: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: orange;
            /*由于box1的浮动，导致box3位置上移也就是box3收到了box1浮动的影响，位置发生了改变
            设置清除浮动以后，浏览器会自动为元素添加一个上外边距以使其位置不受其他元素的影响*/
            clear: both;
        }
    </style>
</html>

运行结果：

那怎么完美解决高度塌陷问题呢?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
    </body>
    <style>
        .box1{
            border: 16px red solid;
        }
        .box2{
            width: 100px;
            height: 300px;
            background-color:#bfa;
            float: left;
        }
        .box3{
            clear: both;
        }
    </style>
</html>

以上方式通过插入一个没有任何内容的div，其中的div设置clear: both。

但是插入一个div好像有点多余，可以通过伪元素进行优化~

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

那有没有一种方法能够完美解决子元素和父元素外边距重叠问题和高度塌陷问题呢？clear可以做到。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
    </body>
    <style>
        .box1{
            width: 200px;height: 208px;
            background-color:#bfa;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }
    </style>
</html>

解决方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="box1 clearfix">
            <div class="box2"></div>
        </div>
    </body>
    <style>
        .box1{
            width: 200px;height: 208px;
            background-color:#bfa;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
    </style>
</html>

以上是关于高度塌陷BFCclear的主要内容，如果未能解决你的问题，请参考以下文章