HTML关于高度塌陷的解决方案（推荐使用第三种方式）

最新推荐文章于 2023-10-12 23:01:42 发布

一妍为定

最新推荐文章于 2023-10-12 23:01:42 发布

阅读量432

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/rmy_20/article/details/105346815

版权

高度塌陷：父盒子的高度由子盒子撑开，由于子盒子浮动之后，造成父盒子的高度为0的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .box1 {
            height: 300px;
            width: 100px;
            background-color: #51b7ec;
            float: left;
        }

        .box2 {
            height: 200px;
            width: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

结果：
在这里插入图片描述
解决方案：
1、w3c提供的一种方法：内墙法

<div class="outer">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="clearfix" style="clear: both"></div><!--没有实际价值，就是为了清除浮动-->
</div>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*方式：w3c组织所推荐的一种方式*/
        .outer .clearfix {
            clear: both;
        }

        .box1 {
            height: 300px;
            width: 100px;
            background-color: #51b7ec;
            float: left;
        }

        .box2 {
            height: 200px;
            width: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="clearfix"></div><!--没有实际价值，就是为了清除浮动-->
</div>
</body>
</html>

2、给父盒子添加overflow: hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*解决高度塌陷的第二种方式: overflow:hidden*/
        .outer {
            overflow: hidden;
        }

        .box1 {
            height: 300px;
            width: 100px;
            background-color: #51b7ec;
            float: left;
        }

        .box2 {
            height: 200px;
            width: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

3、其他优秀的处理方案（推荐使用的），双伪元素浮动：
在父盒子的class中添加clearfix，复制以下代码即可

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

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:before, .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .box1 {
            height: 300px;
            width: 100px;
            background-color: #51b7ec;
            float: left;
        }

        .box2 {
            height: 200px;
            width: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
<div class="outer clearfix">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

结果：
在这里插入图片描述

一妍为定

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML关于高度塌陷的解决方案（推荐使用第三种方式）

高度塌陷：父盒子的高度有子盒子撑开，由于子盒子浮动之后，造成父盒子的高度为0的情况。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box...
复制链接

扫一扫