html - 是否溢出 :hidden make it block level element?

Question

你好，我正在尝试制作水平导航栏。

对于 ul，我设置了 overflow:hidden。对于李，我放了 float:left。我在水平导航栏下方有一些段落。

当我删除“溢出:隐藏”时，该段落将移动到我的水平导航栏旁边。我不懂为什么。有人可以给我解释一下吗？

Answer 1

没有。 从不使用overflow: hidden;在导航栏上。

overflow: hiddenl可以隐藏您需要显示的元素。所以除非您确实需要它，否则不要使用它，但在这种情况下，您不需要。

使用 clear: left;关于段落

li { 
float:left;
padding:10px
}
ul { 
float:left;
list-style:none;
background:grey;
width:auto;
}
p { 
clear:left;
float:left;
width:100px
}

<ul>
  <li>LIST</li>
  <li>LIST</li>
  <li>LIST</li>
  <li>LIST</li>
</ul>
<p>
  SOMETEXTSOMETEXTSOMETEXTSOMETEXTSOMETEXTSOMETEXTSOMETEXTSOMETEXT SOMETEXTSOMETEXTSOMETEXTSOMETEXTSOMETEXTSOMETEXT SOMETEXTSOMETEXTSOMETEXTSOMETEXT
</p>

或使用 float: left; width: 100%;在 <ul> 上(导航列表)

li {
  float: left;
  padding: 10px
}

ul {
  float: left;
  list-style: none;
  background: grey;
  width: 100%;
}

p {
  float: left;
  width: 100px
}

<ul>
  <li>LIST</li>
  <li>LIST</li>
  <li>LIST</li>
  <li>LIST</li>
</ul>
<p>
  SOMETEXTSOMETEXTSOMETEXTSOMETEXTSOMETEXTSOMETEXTSOMETEXTSOMETEXT SOMETEXTSOMETEXTSOMETEXTSOMETEXTSOMETEXTSOMETEXT SOMETEXTSOMETEXTSOMETEXTSOMETEXT
</p>