Question

我见过很多人在元素上使用以下样式：

float:left; width:100%;

这有什么意义，因为我认为浮动是这样的，块级元素可以彼此相邻（如果它们是100％宽的话，它们会赢得）

这是浮动还是在学校或网站上教授的东西，因为我也看到人们在他们的样式表中包含* {float:left;}。

Answer 1

当你float时，关于如何处理它们的其他事情也会发生变化。例如，看看这个小提琴：

注意包含浮动元素的div如何折叠而另一个不包含。

修改

我更新了小提琴的示例，说明如何使用overflow防止父级崩溃：

http://jsfiddle.net/RnP2V/1/

Answer 2

这看起来像采用“Float Nearly Everything”（fne）方法：http://orderedlist.com/blog/articles/clearing-floats-the-fne-method/（2004年10月）

有人想要这样做的原因是在不必clear的情况下包含他们的花车。浮动元素引入了新的块格式化上下文，因此将包含任何后代浮动元素。阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context和How does the CSS Block Formatting Context work?

我建议避免浮动一些你不想特别想要放在其他东西旁边的东西，并寻找一种不同的方法来容纳花车，其中有几种。

查看这篇文章，了解一些最佳选择（我目前已见过）：http://colinaarts.com/articles/float-containment/

摘自上述文章：

#foo {
  overflow: hidden; /* For modern browsers and IE7 */
  display: inline-block; /* For IE6 */
}

#foo { display: block; } /* For IE6 */

Answer 3

这确实令人困惑，虽然不像评论所说的那样简单愚蠢：

我认为浮动是这样的，块级元素可以彼此相邻（如果它们是100％宽，它们将不会）“

浮动元素不会位于常规文档流中 - 而是a floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible.因此，任何浮动元素都会从其父元素获取100％宽度，而不是它重新定位后显示的元素。