CSS float：left usage [英] CSS float:left usage

问题描述

我看到很多人在元素上使用以下样式：

I have seen a lot of people using the following styles on elements:

float:left; width:100%;

这是什么意思，因为我认为float是使块级元素可以坐在每个其他（如果他们是100％宽，他们不会）

What is the point of this as I thought float is so that block level elements can sit next to each other (which they won't if they are 100% wide)

这是浮动留下的东西，在学校或网站的某个地方教我，我也看到人在样式表中包含 * {float：left;} 。

Is this floating left something that is taught in schools or on a website somewhere as I have also seen people include * {float:left;} in their stylesheets.

推荐答案

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

This looks like an adoption of the "Float Nearly Everything" (fne) method: http://orderedlist.com/blog/articles/clearing-floats-the-fne-method/ (October 2004)

某人想要这样做的原因是包含它们的浮动而不必清除他们。浮动元素引入了一个新的块格式化上下文，因此将包含任何后代浮动元素。阅读： https://developer.mozilla.org/en-US/docs / Web / CSS / Block_formatting_context 和 CSS块格式化上下文如何工作？

The reason why someone would want to do this is to contain their floats without having to clear them. Floating an element introduces a new Block Formatting Context, and thus will contain any descendant floating elements. Read: https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context and How does the CSS Block Formatting Context work?

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

I would recommend avoiding floating something that you don't specifically want to position next to something else, and seek a different method for containing floats, of which there are several.

查看这篇文章中的几个最好的选项（我见过到目前为止）： http://colinaarts.com/articles/float-containment/

Check out this article for a few of the best options (i have seen so far): http://colinaarts.com/articles/float-containment/

摘自上述文章：

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

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

这篇关于CSS float：left usage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！