Html 导航栏问题（清除：两者和显示：表格）
我对代码的这一特定部分感到困惑。如果有人能向我解释，我将不胜感激！！ 我正在做一个导航条，它看起来像这样： 这是我感到困惑的CSS的一部分：Html 导航栏问题（清除：两者和显示：表格）,html,css,css-float,navbar,display,Html,Css,Css Float,Navbar,Display,我对代码的这一特定部分感到困惑。如果有人能向我解释，我将不胜感激！！ 我正在做一个导航条，它看起来像这样： 这是我感到困惑的CSS的一部分： img{ weight:100px; height:100px; border-radius: 100%; } body{ margin:0; } header{ background-color: lightblue; } /*don'
img{
weight:100px;
height:100px;
border-radius: 100%;
}
body{
margin:0;
}
header{
background-color: lightblue;
}
/*don't really understand this part*/
header::after{
content:" ";
display:table;
clear:both;
}
.container{
width:80%;
margin:0 auto;
}
.logo{
float:left;
padding:5px 0;
}
nav{
float:right;
}
nav ul{
margin:0;
padding:0;
list-style: none; /*remove HTML bullets*/
}
nav li{
display:inline-block;
margin:0 25px;
padding-top:55px;
font-family: 'Montserrat', sans-serif;
}
nav a{
color:#444;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color:black;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My logo</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--a navbar should be in header section becuase it's not the content-->
<header>
<div class="container">
<img class="logo" src="logo.jpg" alt="">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
img{
重量：100px；
高度：100px；
边界半径：100%；
}
身体{
保证金：0；
}
标题{
背景颜色：浅蓝色；
}
/*我真的不明白这部分*/
标题：：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.集装箱{
宽度：80%；
保证金：0自动；
}
.标志{
浮动：左；
填充：5px0；
}
导航{
浮动：对；
}
导航ul{
保证金：0；
填充：0；
列表样式：无；/*删除HTML项目符号*/
}
李海军{
显示：内联块；
边际：0.25px；
填充顶部：55px；
字体系列：“蒙特塞拉特”，无衬线；
}
导航a{
颜色：#444；
文字装饰：无；
文本转换：大写；
}
导航a：悬停{
颜色：黑色；
}
我的标志
header:：在{content:”；显示：表格；清除：两者；}所以我的问题是，如果没有这部分代码，图片中的背景色会消失，我不明白为什么，尤其是显示：表格和清除：两者。我确实有标志和li部分浮动在两侧，并且清晰：两者都不会阻止它们浮动，背景色仍然会显示出来。我很困惑它为什么会在那里，以及显示和清除这两者如何影响背景色。谢谢 这是因为您已浮动标题的所有内容。这就像给它们一个绝对位置，并将它们从父容器的流中移除，这意味着没有其他内容的父容器将像它是空的一样工作。您还可以为标题指定一个可以看到背景色的高度，但是，这可能会使其更难根据内容包装进行调整 讨论中的CSS通过：：after的内容属性添加了一些内容。然后清除浮动，使内容被标题看到，从技术上讲，标题是它的父项。显示表也可以是显示块。它只是确保after的行为与放置在html中的元素类似。但实际上你是在用CSS来伪装它