为什么块元素表现得像内联元素？

Question

:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}
.navigation li {
  list-style-type: none;
  float: left;
  padding: 1em;
}

<ul class="navigation">
  <li> <a href="#help"> Help </a> 
  </li>
  <li> <a href="#about"> About us </a> 
  </li>
</ul>

<p>lorem ipsum</p>

<br/>

<p id="help"><b> Help yourself man </b>
</p>
<p id="about"><b> We're free software lovers </b>
</p>

如果我们检查上面的代码片段（使用dev tool）ul和p元素都display:block在用户代理样式表下。什么都没有被应用element.style，他们都没有float:left

是的，float应用于li notul并且float:left从.navigation li课堂中删除将解决问题。

p并且ul两者都是块元素，那么为什么它们表现为内联元素？不添加新的换行符。

我不是在寻找解决方案，我需要了解这背后的概念。

Answer 1

解决方案

添加clear: left到p标签。这将导致它低于它之前的左侧浮动元素。

在标签上使用Nicolas Gallagher 的 micro clearfixul：

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
  *zoom: 1;
}

这将导致ul标签扩展到li它包含的元素的大小。

解释

浮动元素不占用文档流中的空间，因此它们被包裹的元素，ul在这种情况下，不会增长以占用空间，因此它的高度为 0 px。

该p标签进入之后的ul，这不占用空间，所以它正好出现在顶部。

该li标签浮动到左侧，它们滑到左侧和推动一切，他们的权利可以推到左边该装置。在这种情况下，p标签。