CSS3浮动元素不会清除答案

【问题标题】：CSS3 floated element won't clearCSS3浮动元素不会清除
【发布时间】：2020-06-10 14:52:18
【问题描述】：

我正在尝试为网站制作导航栏，当然，我需要它居中并且列表项浮动。我的问题是导航栏下的图像一直跟着它浮动，我使用了 clear:both 属性，所以我很困惑。 HTML 代码如下：

<body>

<div id="header">
  <img src="img/headerImg.jpg" alt="Header image" id ="headerImg" />

  <div id = "nav">
    <ul>
  <li class="menuItem"><a href = "index.html">Početna</a></li>
  <li class="menuItem"><a href = "">Dizajn</a></li>
  <li class="menuItem"><a href = "">Web programiranje</a></li>
  <li class="menuItem"><a href = "">Ostale usluge</a></li>
  <li class="menuItem"><a href = "">Kontakt</a></li>
</ul>
  </div> <!--close nav-->

</div> <!--close header-->

<div id="indexContent">

  <div class="indexContentItem">
    <img src="img/indexDes.jpg" alt="Dizajn" class="indexContentImg"/>
    <p><a href="">Dizajn</a></p>
  </div>

  <div class="indexContentItem">
    <img src="img/indexProg.jpg" alt="Web programiranje" class="indexContentImg"/>
    <p><a href="">Web programiranje</a></p>
  </div>

  <div class="indexContentItem">
    <img src="img/indexRest.png" alt="Ostale usluge" class="indexContentImg"/>
    <p><a href="">Ostale usluge</a></p>
  </div>

</div> <!--close indexContent-->

而 CSS 是：

#nav{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

#nav li{
    list-style-type: none;
    text-align: center;
    width: 12em;
    float: left;
}

#nav ul{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#nav a{
    display: block;
}

.indexContentItem{
    float: left;
}

.indexContentItem img{
    display: block;
    height: 15.625em;
    width: auto;
}

.indexContentItem p{
    text-align: center;
}

当然，我只粘贴了相关部分，它是一个模型版本，因为它仍在建设中，但这个截图应该让你知道发生了什么：

【问题讨论】：

标签： html css css-float

【解决方案1】：

Clearfix 应该可以解决您的问题。

#nav:after {
  content: "";
  display: table;
  clear: both;
}

【讨论】：

感谢您的帮助。我能麻烦你解释一下 :after 伪类做什么吗？我在网上看了，但它很混乱和矛盾。
:after 伪元素允许您在元素之后插入内容。这是example。 MDN 也有一些很好的例子，如果你想看看的话。

【解决方案2】：

你可能想试试这个：

#nav{
width: 90%;
margin-left: auto;
margin-right: auto;
clear: both;
position: absolute;
}

position 属性有不同的选项，这可能会有所帮助： http://www.w3schools.com/css/css_positioning.asp

【讨论】：