html - 为什么漂浮的 sibling 并排坐在一起？

Question

ul {
  background: #eee;
  float: left;
  padding: 10px;
  margin: 10px;
  width: 40%;
  list-style: none;
  border: 1px solid #333;
}

<ul id = "done">
  <li>Laundry</li>
</ul>
<ul>
  <li>Garbage Take Out</li>
</ul>

为什么通常将 ul 元素向左浮动会使我的两个 ul 元素在浏览器中并排放置？我的想法是，由于一个在另一个之下，这将导致第一个出现在第二个之上，两者都向左浮动。你能澄清我的理解吗？

Answer 1

你误会了floats :

The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property).

如果您不希望出现这种情况，请不要使用 float 或使用 clear .

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

比如在第二个元素上设置为left或者both

#done + ul {
  clear: left;
}

ul {
  background: #eee;
  float: left;
  padding: 10px;
  margin: 10px;
  width: 40%;
  list-style: none;
  border: 1px solid #333;
}
#done + ul {
  clear: left;
}

<ul id="done">
  <li>Laundry</li>
</ul>
<ul>
  <li>Garbage Take Out</li>
</ul>