HTML，子元素使用float后，导致父元素高度塌陷

作者：你好赵伟 | 2024-03-24 13:24:23

踩

HTML学习中遇到的一个任务：header 标签有两个元素 div（标题）和 nav（导航），希望实现的效果是标题在左侧，导航在右侧。
基础代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>float导致父元素塌陷</title>
    <style>
        header {
            background-color: rgb(32, 86, 156);
            color: #fff;
            border: 5px solid rgb(15, 38, 138);
        }

        header ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        header a {
            color: #fff;
            text-decoration: none;
            display: block;
            padding: 0.5em 1em;
        }

        header .title {
            font-style: italic;
            font-weight: bold;
            padding: 1em;
        }
    </style>
</head>

<body>
    <header>
        <div class="title">页面标题</div>
        <nav>
            <ul>
                <li><a href="">主页</a></li>
                <li><a href="">子页面1</a></li>
                <li><a href="">子页面2</a></li>
            </ul>
        </nav>
    </header>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

初始状态

简单的以为设置float就可以达到效果，于是在CSS代码底部加入：

header .title {
 float: left;
 }

header nav {
 float: right;
}
1
2
3
4
5
6
7

变成一条线：
在这里插入图片描述
这个时候使用百度AI对话进行搜素（没有广告，可以使用其他搜索工具，现在AI搜索在查技术问题的解决方案上确实比以前准确很多了）给我的结果：
在HTML中，float属性用于创建浮动元素，使得元素向左或向右浮动，并且其周围的内容会环绕它。使用float可以实现文本或图片环绕效果，但需要注意的是，使用float后，如果不进行清除浮动，则可能导致父元素高度塌陷的问题。
给了我四个解决方案，我分别实验下，header元素都正常显示了：

在浮动元素之后添加一个清除浮动的元素，并为其设置clear属性。

<header>
        <div class="title">页面标题</div>
        <nav>
            <ul>
                <li><a href="">主页</a></li>
                <li><a href="">子页面1</a></li>
                <li><a href="">子页面2</a></li>
            </ul>
        </nav>
        <div style="clear: both;"></div>
    </header>
1
2
3
4
5
6
7
8
9
10
11

使用伪元素方式清除浮动。
在变成线的代码上，CSS底部加入：

header::after {
  content: "";
  display: table;
  clear: both;
}
1
2
3
4
5

使用overflow属性。
在变成线的代码上，CSS底部加入：

header {
 overflow: auto;
}
1
2
3

上面3种方法修改后的效果如下图：
在这里插入图片描述

使用flex或grid布局代替float。
删除 float 相关css代码，加入：

header {
  display: flex;
}
1
2
3

在这里插入图片描述
稍微修改下，实现标题在左边，导航在右边的布局：

header {
  display: flex;
}

header .title {
  flex: 1;
}

header nav {
  flex: none;
}
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述
右边的导航还不是很好看，再稍微修改下，修改以后flex相关代码如下：

header {
  display: flex;
}
header .title {
  flex: 1;
}
header nav {
  flex: none;
  display: flex;
  align-items: center;
}
header nav ul {
  display: flex;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述
一边学习一边完成任务是个不错的学习方式，分享遇到的问题和解决方案给需要的人。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/302635