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

HTML学习中遇到的一个任务:header 标签有两个元素 div(标题) 和 nav(导航),希望实现的效果是标题在左侧,导航在右侧。

基础代码如下:

html 复制代码
<!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>

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

html 复制代码
header .title {
 float: left;
 }

header nav {
 float: right;
}

变成一条线:

这个时候使用百度AI对话进行搜素(没有广告,可以使用其他搜索工具,现在AI搜索在查技术问题的解决方案上确实比以前准确很多了)给我的结果:

在HTML中,float属性用于创建浮动元素,使得元素向左或向右浮动,并且其周围的内容会环绕它。使用float可以实现文本或图片环绕效果,但需要注意的是,使用float后,如果不进行清除浮动,则可能导致父元素高度塌陷的问题。

给了我四个解决方案,我分别实验下,header元素都正常显示了:

  1. 在浮动元素之后添加一个清除浮动的元素,并为其设置clear属性。
html 复制代码
<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. 使用伪元素方式清除浮动。
    在变成线的代码上,CSS底部加入:
html 复制代码
header::after {
  content: "";
  display: table;
  clear: both;
}
  1. 使用overflow属性。
    在变成线的代码上,CSS底部加入:
html 复制代码
header {
 overflow: auto;
}

上面3种方法修改后的效果如下图:

  1. 使用flex或grid布局代替float。
    删除 float 相关css代码,加入:
html 复制代码
header {
  display: flex;
}

稍微修改下,实现标题在左边,导航在右边的布局:

html 复制代码
header {
  display: flex;
}

header .title {
  flex: 1;
}

header nav {
  flex: none;
}

右边的导航还不是很好看,再稍微修改下,修改以后flex相关代码如下:

html 复制代码
header {
  display: flex;
}
header .title {
  flex: 1;
}
header nav {
  flex: none;
  display: flex;
  align-items: center;
}
header nav ul {
  display: flex;
}

一边学习一边完成任务是个不错的学习方式,分享遇到的问题和解决方案给需要的人。

相关推荐
卓伊凡1 分钟前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞3 分钟前
Vue3后退不刷新,前进刷新
前端
LuckySusu6 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu6 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu7 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge9 分钟前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端
LuckySusu9 分钟前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js
BestStarLi14 分钟前
个人写码感悟:TailwindCSS不要忽视子选择器
前端
_大学牲16 分钟前
Flutter 之魂 GetX🔥(三)深入掌握依赖管理
前端·flutter
渣哥31 分钟前
从 AOP 到代理:Spring 事务注解是如何生效的?
前端·javascript·面试