子元素浮动时，如何使父类元素高度自适应

三木想养一只猫

已于 2022-08-22 13:44:14 修改

阅读量590

点赞数 1

文章标签： css css3 html

于 2022-08-22 13:40:13 首次发布

本文链接：https://blog.csdn.net/farel/article/details/126464053

版权

浮动元素父元素塌陷 clear after伪类 clearfix

关键词由CSDN通过智能技术生成

当给一个元素中的子类元素变成浮动类型时，子元素无法撑起父元素的高度，导致父元素高度塌陷

比如这样

高度塌陷代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box1{
                border: 10px red solid;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            }
            .box3{
                 height: 100px;
                 background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
        <div class="box3"></div>
    </body>
</html>

解决方法：

第一种（不推荐）：为父元素手动添加高度

虽然这样可以解决塌陷，但是无法做到自适应增加父元素高度。当子元素高度超过父元素时，还是会产生高度塌陷

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box1{
                border: 10px red solid;
                height: 100px;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            }
            .box3{
                 height: 100px;
                 background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
        <div class="box3"></div>
    </body>
</html>

在这里插入图片描述

第二种：使用clear来清除浮动元素对父元素的影响，在子元素结束的地方新加一个div并让其clear:botn，但当浮动元素过多时，添加起来很麻烦

属性值

clear:none，默认值，不清除浮动
clear:left，清除左侧浮动元素对当前元素的影响
clear:right，清除右侧浮动元素对当前元素的影响
clear:both，清除两侧浮动元素对当前元素的影响

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box1{
                border: 10px red solid;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            }
            .box3{
                 height: 100px;
                 background-color: yellow;
            }
            .clear{
                clear: both;
            }

        </style>
    </head>
    <body>

        <div class="box1">
            <div class="box2"></div>
            <div class="clear"></div> //看这个地方
        </div>

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

    </body>
</html>

在这里插入图片描述

第三种（推荐）：使用after伪类

在最外层父元素上，添加一个after伪类，并将clear设置为botn，这样的做法和第二种方法是一样的，但是不会添加新的div出来

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box1{
                border: 10px red solid;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            }
            .box3{
                 height: 100px;
                 background-color: yellow;
            }
            .clearfix:after{
                /*添加一个内容*/
                content: "";
                /*转换为一个块元素*/
                display: block;
                /*清除两侧的浮动*/
                clear: both;
            }

        </style>
    </head>
    <body>

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

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

    </body>
</html>