关于 CSS 浮动的困惑

Question

我对花车有点困惑。我为浮动创建了一个示例。 http://jsbin.com/pasavifego/edit?html,css,js,output

我已经为我的 ul 设置了红色背景颜色。

我所有的li都向左浮动，我现在看不到任何背景颜色。如果我移除浮动它正在工作。谁能解释一下为什么会这样。

另一个问题是，当一个 div 是 float:left 时，当我添加另一个 div 时，为什么它从那个 div 旁边开始。

谁能解释一下。

谢谢

Answer 1

在这种情况下，您应该使用 display: inline 而不是 float: left 参见示例 https://jsfiddle.net/kvb5hb6f/7/

有关浮动元素的良好入门说明，请参见此处 http://www.hongkiat.com/blog/css-floats/#What_happens_to_an_element_when_it_floats

li{
display:inline;
list-style:none;
}

Answer 2

@adam-buchanan-smith 的回答是在没有浮动的情况下执行此操作的好方法。

但要回答您的问题，实际情况是 <ul> 没有高度。正如 @j08691 的评论所说，floated 元素在其容器中不占用垂直 space。在此示例中，第二个 <ul> 仅显示为红线：

ul {
  outline: 1px solid red
}
.with-floated-lis li {
  float: left
}

<ul>
  <li>not floated</li>
</ul>

<ul class="with-floated-lis">
  <li>floated</li>
<ul>

解决此问题的技巧称为 "clearfix hack"，它是前端开发中必不可少的工具。当您浮动某物并希望其容器垂直扩展以包含浮动元素时，请将 clearfix 应用于容器：

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
ul {
  outline: 1px solid red
}
.with-floated-lis li {
  float: left
}

<ul class="with-floated-lis clearfix">
  <li>floated, ul has clearfix</li>
</ul>

Nicolas Gallagher 编写了该 clearfix。他的post在这里http://nicolasgallagher.com/micro-clearfix-hack/. Read more about clearfix and floats here https://css-tricks.com/snippets/css/clear-fix/

关于 CSS 浮动的困惑

Confusion about CSS Floats

css

css-float