1

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

float:left; width:100%;

这是什么意思，因为我认为浮动是为了让块级元素可以彼此相邻（如果它们是 100% 宽，它们就不会）

这个浮动是否会留下一些在学校或某处网站上教授的东西，因为我也看到人们将其包含* {float:left;}在他们的样式表中。

4

3 回答 3

0

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

http://jsfiddle.net/RnP2V/

注意包含浮动元素的 div 是如何折叠的，而另一个没有。

编辑：

我用一个示例更新了小提琴，该示例说明了如何使用以下方法防止父级崩溃overflow：

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

于 2013-06-04T14:07:14.867 回答
0

这看起来像是采用了“浮动几乎所有东西”（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以及CSS 块格式化上下文如何工作？

我建议避免浮动一些你不想放在其他东西旁边的东西，并寻找一种不同的方法来包含浮动，其中有几种。

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

摘自上述文章： 

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

#foo { display: block; } /* For IE6 */
于 2013-06-04T14:49:34.423 回答
-1

这确实令人困惑，虽然不像你评论的那么简单：

我认为浮动是为了让块级元素可以彼此相邻（如果它们是 100% 宽，它们就不会）”

浮动元素不在常规文档流中——而是根据正常流布局浮动框，然后从流中取出并尽可能向左或向右移动。因此，任何浮动元素都会从其父元素中获取 100% 的宽度，而不是它在重新定位后出现的元素。

指定width:100%仍然是完全多余的，因为浮点数是block元素，因此在大多数情况下不需要 100% 宽度指定。

于 2013-06-04T14:29:34.890 回答