Question

我对花车很困惑。我为float创建了一个例子。 http://jsbin.com/pasavifego/edit?html,css,js,output

我给我的背底颜色为红色。

我的所有人都向左漂浮，我现在看不到任何背景颜色。如果我移除浮子它正在工作。有人可以解释为什么会这样。

另一个问题是，当一个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的评论所说，float ed元素在其容器中不占用任何垂直空间。在此示例中，第二个<ul>只显示为红线：

＆＃13;

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

＆＃13;

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

＆＃13;

解决这个问题的诀窍叫做＆＃34; clearfix hack＆＃34;，它是前端开发中必不可少的工具。当您浮动某些东西并希望其容器垂直扩展以包含浮动元素时，请将clearfix应用于容器：

＆＃13;

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

＆＃13;

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

＆＃13;

Nicolas Gallagher写了那个clearfix。他的帖子在http://nicolasgallagher.com/micro-clearfix-hack/。阅读更多关于clearfix和floats https://css-tricks.com/snippets/css/clear-fix/

的信息

关于CSS Floats的困惑

2 个答案: