导航栏浮动后布局错乱怎么解决
1. 伪元素清除浮动（推荐用于保留 float 布局）
将这段 CSS 添加到你的导航栏父容器（比如 .navbar 或 nav
.navbar::after {
content: "";
display: table;
clear: both;
}
2. 触发 BFC 清除浮动（简单粗暴）
.navbar {
overflow: hidden; /* 或者使用 overflow: auto; */
}
3. 改用 Flex 弹性布局（最推荐的现代写法）
如果你想彻底抛弃浮动，可以直接用 Flex 重构。
HTML 结构保持不变
/* 去掉子元素的 float: left，给父容器加以下样式 */ .navbar { display: flex; align-items: center; /* 垂直居中 */ justify-content: space-between; /* 水平两端对齐，可按需改成 center 或 flex-start */ }
/* 去掉子元素的 float: left，给父容器加以下样式 */
.navbar {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 水平两端对齐，可按需改成 center 或 flex-start */
}
4. 全局基础重置（防止盒模型和默认间距干扰）
/* 统一盒模型，防止 padding 撑大宽度 */ * { box-sizing: border-box; } /* 清除 ul 和 li 的默认间距 */ ul, li { margin: 0; padding: 0; list-style: none; /* 顺便去掉列表自带的小圆点 */ }
你可以直接复制对应的代码块到你的项目里试试看。
本文编辑由 否玩代码 http://www.fouwan.com
