我只是想给我觉得需要清除浮动的子元素的父元素添加了clearfix 为什么页面就会变成这样。
来源：2-2 页面顶部的开发（1）
清夏_
2022-11-08 11:08:08
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>慕云游商城 - 机票、酒店、旅游攻略</title>
<meta name="Keywords" content="机票，酒店，旅游攻略，签证，出国，自由行" />
<meta
name="Description"
content="慕云游商城有10多年旅游行业经验, 为您提供全方位旅游服务"
/>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/css.css" />
</head>
<body>
<!-- header -->
<header class="sit_head">
<div class="topbar">
<div class="center_wrap">
<nav class="shortcut_links">
<ul class="clearfix">
<li>
<a href="#">目的地</a>
</li>
<li>
<a href="#">锦囊</a>
</li>
<li class="have_menu">
<a href="#">社区</a>
</li>
<li>
<a href="#">行程助手</a>
</li>
<li class="have_menu">
<a href="#">商城</a>
</li>
<li class="have_menu">
<a href="#">酒店·民宿</a>
</li>
<li>
<a href="#">特价酒店</a>
</li>
</ul>
</nav>
<div class="topbar_r clearfix">
<a class="iconfont" href=""></a>
<a href="#">|</a>
<a class="iconfont" href="#"> </a>
<a class="iconfont" href="#"></a>
<a class="iconfont" href="#"></a>
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
</div>
<nav class="main_nav">
<div class="center_wrap">
<ul class="clearfix">
<li class="have_menu">
<a href="#">机酒自由行</a>
</li>
<li>
<a href="#">优惠机票</a>
</li>
<li class="have_menu">
<a href="#">跟团游</a>
</li>
<li>
<a href="#">酒店</a>
</li>
<li class="have_menu">
<a href="#">当地玩乐</a>
</li>
<li>
<a href="#">签证</a>
</li>
<li>
<a href="#">游轮</a>
</li>
<li>
<a href="#">河轮</a>
</li>
<li>
<a href="#">保险</a>
</li>
<li>
<a href="#">租车自驾</a>
</li>
<li class="have_menu">
<a href="#">深度旅游</a>
</li>
<li>
<a href="#">私人订制</a>
</li>
</ul>
</div>
</nav>
<div class="header_con">
<div class="center_wrap clearfix">
<h1>慕云游商城</h1>
<div class="soso_box">
<input type="text" />
<a href="#" class="btn"></a>
</div>
</div>
</div>
</header>
</body>
</html>
/* header */
/* 头部总高度 */
.sit_head {
height: 150px;
min-width: 1152px;
}
/* 顶部黑色区域高度 */
.topbar {
height: 32px;
min-width: 1152px;
background-color: #2a2a2a;
}
/* 顶部黑色区域左边浮动 */
.topbar .shortcut_links ul li {
float: left;
margin-right: 18px;
}
.topbar .shortcut_links ul li.have_menu {
padding-right: 18px;
}
.topbar .shortcut_links ul li a {
line-height: 32px;
font-size: 14px;
}
/* 顶部黑色区域右边浮动 */
.topbar .topbar_r a {
float: right;
font-size: 18px;
margin-right: 16px;
}
.topbar .topbar_r a:last-child {
margin-right: 0;
}
/* 中间蓝色区域高度 */
.main_nav {
height: 40px;
min-width: 1152px;
background-color: #20bd9a;
}
/* 中间蓝色区域浮动 */
.main_nav ul li {
float: left;
margin-right: 18px;
}
.main_nav ul li.have_menu {
padding-right: 16px;
}
.main_nav ul li a {
line-height: 40px;
font-size: 17px;
}
/* 下面带h1标题区域高度 */
.header_con {
height: 78px;
}
.header_con h1 {
float: left;
line-height: 78px;
height: 36px;
font-size: 24px;
color: #20bd9a;
font-weight: bold;
margin-right: 20px;
}
.header_con .soso_box {
float: left;
width: 405px;
height: 30px;
line-height: 78px;
}
.header_con .soso_box input {
width: 371px;
height: 28px;
border-radius: 4px 0 0 4px;
border: 1px solid #20bd9a;
outline: none;
}
.header_con .soso_box a {
display: block;
width: 32px;
height: 30px;
background: #20bd9a;
border-radius: 0 4px 4px 0;
}
没有添加浮动的时候页面没有乱，但还有两个问题，1、右侧的那个使用字体图标的地方（登录注册那一块，全部都是反着排的， ） 2、靠近搜索框的那个按钮上不去，浮动也没用
写回答
1回答
-
好帮手慕慕子
2022-11-08
同学你好，问题解答如下：
1、想跟同学确认下，粘贴的代码是否是存在问题的代码，老师测试粘贴的代码，效果如下：
与同学所粘贴的截图并不一致。
另外，父元素添加clearfix，结合伪元素实现清除浮动，并不会影响到其他部分，同学截图的效果没实现，是你代码书写的有问题，与这个无关。
2、字体图标顺序是反的，原因是给里面的图标设置的右浮动了，所以元素依次从右向左排列。
建议修改：给外层盒子topbar_r设置右浮动，让整体在右侧显示，然后给里面的每一项设置左浮动，让其在topbar_r内部依次从左到右排列即可。如下：
3、因为搜索按钮设置为块元素，默认独占一行，所以无法与输入框在一行显示，如下图所示：
建议修改：分别给输入框和按钮添加左浮动，让其在一排显示，如下：
祝学习愉快~
0
相似问题
导航栏受到浮动的影响
回答 1