标题卡在导航栏中。我需要在哪里放置 clearfix？
Posted
技术标签:
【中文标题】标题卡在导航栏中。我需要在哪里放置 clearfix？【英文标题】：Header stuck in nav bar.Where I need to put clearfix? 【发布时间】：2020-04-01 09:22:15 【问题描述】：当我在 .header 中添加背景图像时，图像卡在导航栏内。html 中出现之前的通知。我不知道应该在哪里使用 clearfix 或者这不是问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="/sass/main.css" />
<title>Navigation</title>
</head>
<body>
<nav class="nav">
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Pre-Order</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">About</a></li>
</ul>
<div class="logo__box">
<img src="images/logo.png" class="logo" />
</div>
</nav>
<header class="header">
ga
</header>
</body>
</html>
@import "_variables.scss";
@import "_mixins.scss";
@import "_animations.scss";
*
box-sizing: inherit;
margin: 0;
padding: 0;
html
font-size: 10px;
body
box-sizing: border-box;
font-family: "Roboto", Arial, Helvetica, sans-serif;
line-height: 1.6;
color: $font-color;
.nav
width: 100%;
font-size: 2rem;
background-color: $font-color;
float: left;
ul
list-style: none;
margin: 0;
padding: 2.5rem;
float: right;
li
display: inline-block;
padding-right: 2rem;
padding-left: 7rem;
a
text-decoration: none;
font-weight: bold;
color: $font-color-header;
letter-spacing: 3px;
.logo__box
position: absolute;
float: left;
padding: 1rem;
left: 10rem;
.logo
height: 6rem;
.header
background-image: url(../images/header.jpg);
@mixin clearfix
&:after
content: "";
display: table;
clear: both;
【问题讨论】：
抱歉它是嵌套的，因为我现在正在使用 sass。 【参考方案1】：由于浮动，问题即将到来。每当使用浮点数时，我们需要用户清除父级中的属性。
你的情况
.nav:after,
.nav:before
content: "";
display: table;
clear: both;
【讨论】：
以上是关于标题卡在导航栏中。我需要在哪里放置 clearfix？的主要内容，如果未能解决你的问题，请参考以下文章
iOS：如何在导航栏中与 NavigationBar Title 平行放置一个按钮？