Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

你误解了floats：

浮动（或“浮动”或浮动）最有趣的特征 “浮动”框是指内容可以沿着它的边流动（或者是 “清除”财产禁止这样做。

如果您不想要此行为，请不要使用浮动或使用clear。

此属性指示元素框的哪些边可能不与较早的浮箱相邻。

例如，在第二个元素

上将其设置为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>

Answer 2

如果你想要你的用例，那么html代码就像是，

<div style="float:left">
<ul id = "done">
        <li>Laundry</li>
     </ul>
     <ul>
        <li>Garbage Take Out</li>
     </ul>
</div>

并从float:left元素

的css中删除ul

Answer 3

你的宽度只有40％，因此2 x并排适合占用约80％（但由于需要标准化或重置css和盒子大小，因此不完全是80％）。浮动只允许元素自然地与左侧对齐，并通过将事物从流中取出来在页面上给出空间。如果你用

清除浮动

clear:left

然后他们将垂直堆叠。正确使用明确的修复程序将有助于此。试试这里： - https://web-design-weekly.com/snippets/sass-clearfix-mixin/

 @mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

为什么浮动的兄弟姐妹并排坐着？

3 个答案: