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

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 没有任何应用，其中 none 有 float:left

是的，float 应用于 li 而不是 ul 并从 .navigation li 中删除 float:left class 将解决问题。

p 和 ul 都是 block 元素那么为什么它们表现为 inline 元素？不添加新的换行符。

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

Answer 1

对

从 .navigation li class

中删除 Float:left

你好同学，

li 不像内联元素，它是 Block 元素本身。如果具有 Float:left 的块元素始终背对背对齐。

http://www.impressivewebs.com/difference-block-inline-css/

从这里可以清楚的了解到什么是内联元素和块元素

Answer 2

问题在于 ul 中的所有元素都是浮动的，因此 ul 的行为就好像它没有内容一样。

如果您希望 li 保留在一行中，一个解决方案是使用 display: inline 而不是 float: left。

:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}

.navigation li {
  list-style-type: none;
  display: inline;
  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>

Answer 3

解决方案

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

在 ul 标签上使用 Nicolas Gallagher's micro clearfix：

.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 元素的大小。

说明

浮动元素不会在文档流中占据 space，因此它们被包裹的元素 ul 在这种情况下，不会增长到占据 space, 所以高度为 0 像素。

p 标签紧跟在 ul 之后，ul 不占用 space，因此它出现在顶部。

li 标签向左浮动，这意味着它们向左滑动，将所有可以向左推的东西推到右边。在这种情况下，p 标签。

Answer 4

你也可以在Floated li后面加一个clear:left样式就可以解决问题。

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

Why block elements behave like inline elements?

html

css

css-float

解决方案

说明