26.html中float属性覆盖（高度塌陷）怎么办 (BFC)

最新推荐文章于 2023-07-23 21:47:25 发布

Keeling1720

最新推荐文章于 2023-07-23 21:47:25 发布

阅读量717

点赞数 2

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/116106190

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

文章目录

高度覆盖

概念：在浮动布局中，父元素的高度经常是由子元素撑开的，但是，当子元素设置为浮动时（float），其完全脱离文档流，会导致父元素的高度丢失。
例如：
未设置浮动时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style>
        .outer{
            border:5px solid red;
        }

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

显示：在这里插入图片描述
设置浮动后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style>
        .outer{
            border:5px solid red;
        }

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

显示：
在这里插入图片描述
这就是所谓的高度塌陷了，很明显，这样子肯定不是我们想要的布局对吧。那么该怎么解决这个问题呢？这里我们就要引出一个CSS中的一个隐藏属性BFC。

方法一、BFC

BFC（Block Formatting Context）：块格式化环境，是CSS中得到一个隐藏属性，开启后，元素会变成一个独立的布局区域。
开启BFC的特点：

1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的子元素和父元素的外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素

那么如何开启BFC呢？方法如下：

1.将元素的overflow设置为一个非visible的值（例如:auto或者hidden(常用))
2.设置元素的浮动，即使用属性float（不推荐）
3.设置元素为行内块元素，即使用属性 display: inline-block (不推荐)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style>
        .outer{
            border:5px solid red;
            overflow: hidden;
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: #bbffaa;
            float: left;
        }
        
        .box{
            width: 100px;
            height: 100px;
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    
    <div class="box"></div>
</body>
</html>

显示：
在这里插入图片描述

方法二、使用clear属性

clear元素：消除浮动元素对当前元素所产生的影响。

可选值：
left：消除左侧浮动元素对当前元素的影响
right：消除右侧浮动元素对当前元素的影响
both：消除两侧中最大影响的那一侧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style>
        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
            font-size: 30px;
        }

        .box1{
            background-color: #bfa;
            float: left;
        }

        .box2{
            background-color: yellowgreen;
            float: left;
        }

        .box3{
            background-color: grey;
            clear: left;
        }


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

显示：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style>
        .box1,.box3{
            width: 100px;
            height: 100px;
            font-size: 30px;
        }

        .box2{
            width: 200px;
            height: 200px;
            font-size: 30px;
        }

        .box1{
            background-color: #bfa;
            float: left;
        }

        .box2{
            background-color: yellowgreen;
            float: right;
        }

        .box3{
            background-color: grey;
            clear: left;
        }


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

这里将上一个例子的box2设置为向右浮动，且设置box2的长宽为200px，此时由于box3只清除了左侧浮动元素的影响，因此他的位置紧挨着box1下边。
显示如下：
在这里插入图片描述
如果让box3的clear值为right，则显示如下：

方法三、after伪类（最完美的解决方法）

注意：该方法同样适用于解决外边距覆盖问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷最完美解决方法after</title>
    <style>
        .box1{
            border:10px solid red;
            overflow: hidden;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: #bbffaa;
            float: left;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            float: left;
        }

        .box1::after{
        	/*设置空文本*/
            content: '';
            /*设置最后一个元素为块元素，以此撑开父元素*/
            display: block;
            /*清除浮动元素较大的一侧，以此对父元素进行最大程度的城开*/
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

前面我们已经知道了，造成高度塌陷的主要原因是浮动，因为浮动后，元素会脱离文档流，从而导致父元素无法被其内容撑开。因此，我们after解决问题的思想其实就是：让最后一个浮动元素添加一个空的文本，但由于这个空文本是行内元素，无法撑开父元素，因此我们还需要将其变为块元素（独占一行），最后让其使用clear清除浮动元素较大一侧带来的影响，让父元素尽可能大地撑开然后把其中的元素全部包含进来。
显示：
在这里插入图片描述

使用伪类before解决外边距重叠问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷最完美解决方法after</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: grey;
        }
        .box1::before{
            content: '';
            display: table;
        }
        .box2{
            width: 100px;
            height: 100px;
            margin-top: 100px;
            background-color: #bbffaa;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

显示：
在这里插入图片描述
如果没有before一栏那么显示如下：

重点：使用clearfix解决外边距重叠和高度塌陷

自己写一个clearfix类，如下：

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

然后在需要的地方直接调用即可，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷最完美解决方法after</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: grey;
        }

        .box2{
            width: 100px;
            height: 100px;
            margin-top: 100px;
            background-color: #bbffaa;
        }

        .box3{
            border: 10px solid red;
        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
            float: left;
        }
		/*clearfix类的样式定义*/
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <!--解决外边距重叠-->
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
    <!--解决高度塌陷-->
    <div class="box3 clearfix">
        <div class="box4"></div>
    </div>

</body>
</html>