Html 为什么 Float 比 position:relative 和 absolute 好，而我们可以通过位置快速布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2317219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why Float is better than position:relative and absolute while we can make layout quickly with position?
提问by Jitendra Vyas
Why Float is better than position:relative and absolute while we can make layout quickly with position? and in this recession time, time is very important.
为什么 Float 比 position:relative 和 absolute 好，而我们可以通过位置快速布局？而在这个经济衰退时期，时间非常重要。
when we make 2-col, 3-col or multi-col layout and then position other elements in layout divs.
当我们制作 2-col、3-col 或 multi-col 布局，然后在布局 div 中放置其他元素时。
Most of the world favor in Float . Why Float is better than position:relativeand position:absoluteto give position any element in <body>and other nested elements?
世界上大多数人都喜欢 Float 。为什么 Float 优于position:relative并position:absolute在<body>其他嵌套元素中给出任何元素的位置？
If using position: to layout a page/design, we can create a container div which is set to position:relative, allowing header, content and nav divsinside the container div to be set to position:relative, allowing these divsto be positioned relative to the container div.
如果使用 position: 来布局页面/设计，我们可以创建一个设置为 position:relative 的容器 div，允许divs将容器 div 内的标题、内容和导航设置为 position:relative，允许这些divs相对于容器 div。
and with positioning we can keep "maincontent"first and "leftsidebar"second in source order which is good for SEO.
通过定位，我们可以保持源代码顺序的"maincontent"第一和"leftsidebar"第二，这对 SEO 有好处。
please explain things with example demo page.
请用示例演示页面解释事情。
采纳答案by casraf
floatwill not break the document flow -- also, it will position any element it uses the best it can fit in the container width -- say I have 5 x 200px divs in a 800px width container, the last 5th will go in a "new line" below the other ones -- using position:relativewill make you need to calculate when it needs to break yourself, and it won't break correctly since the displaywill either be blockand go over the whole width or it will be inline-blockor inlinewhich won't render the same way for divs as blockwould and would pretty much mess up the document flow & layout.
float不会破坏文档流——此外，它会定位它使用的任何元素，使其最适合容器宽度——比如我在一个 800px 宽度的容器中有 5 x 200px div，最后 5 个将进入“新线”在其他线下方 - 使用position:relative将使您需要计算何时需要自己折断，并且它不会正确折断，因为display要么会block越过整个宽度，要么会inline-block或inline不会渲染与 div 的方式相同，block并且几乎会弄乱文档流和布局。
It depends on what you want to do: position:relativeis used to move the element a bit aside from it's natural location, whereas floatwill make it pop to the left-most or right-most position in the parent element. position:absolutewill let you position it relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
这取决于您想要做什么：position:relative用于将元素从其自然位置移开一点，而float将使其弹出到父元素中最左侧或最右侧的位置。position:absolute将让您相对于最近的定位祖先定位（而不是相对于视口定位，如固定）。然而; 如果绝对定位元素没有定位祖先，则它使用文档正文，并随着页面滚动而移动。
回答by DisgruntledGoat
Absolute positioning takes the element out of the normal document flow. Any absolutely positioned element is completely ignored when regarding normal elements.
绝对定位使元素脱离了正常的文档流。对于普通元素，任何绝对定位的元素都将被完全忽略。
This breaks in a lot of scenarios. The main one that springs to mind is putting elements underneath each other. With your column example, sure you can absolutely position 3 columns, but you can't put anything below that on the page, because the flow is still at the top of the page. The "absolute" elements do not affect where later content comes.
这在很多情况下都会中断。想到的主要问题是将元素放在一起。对于您的列示例，确保您绝对可以放置 3 列，但您不能在页面下方放置任何内容，因为流程仍在页面顶部。“绝对”元素不会影响后续内容的来源。
With floats, you just put an element afterwards and it wraps around or underneath the floating ones.
对于浮动，您只需在之后放置一个元素，然后它就会环绕在浮动元素的周围或下方。
That's not to say it has no use. Positioning is very useful when you want to pop up a "layer" over the web page.
这并不是说它没有用。当您想在网页上弹出一个“图层”时，定位非常有用。
A short example... take this common HTML scenario:
一个简短的例子......以这个常见的 HTML 场景为例：
<h2>Section title</h2>
<div class="column1">First</div>
<div class="column2">Second</div>
<div class="column3">Third</div>
<h2>Second section title</h2>
...
With floats, you'd use this CSS:
使用浮动，你会使用这个 CSS：
.column1, .column2, .column3 {
float: left;
width: 200px;
}
h2 {
clear: both;
}
And everything would be fine. Let's absolutely position the columns instead:
一切都会好起来的。让我们绝对定位列：
.column1, .column2, .column3 {
position: absolute;
width: 200px;
top: 30px; /* enough to miss the first h2 */
}
.column1 {
left: 0;
background: pink;
}
.column2 {
left: 200px;
background: lightgreen;
}
.column3 {
left: 400px;
background: lightblue;
}
Try this for yourself (with more content in each column) and see what happens to the second heading - it will always be right under the first one, as if the columns aren't there. Actually, the second heading would be mostly hidden by the columns since they're layered over the top of the document.
自己尝试一下（每列中有更多内容），看看第二个标题会发生什么 - 它总是在第一个标题的正下方，就好像这些列不存在一样。实际上，第二个标题将大部分被列隐藏，因为它们分层在文档的顶部。
Unless the columns are fixed height then it is impossible to know where to put that heading below the columns. It's even worse if you want more columns under each heading.
除非列是固定高度，否则不可能知道将该标题放在列下方的何处。如果您希望每个标题下有更多列，那就更糟了。
Honestly, just give it a try and attempt a nice layout using absolute positioning. You'll soon understand its failings.
老实说，试一试并尝试使用绝对定位的漂亮布局。你很快就会明白它的缺点。
回答by Frozenskys
Float is not better than Position, and Position is not better than Float - both should be used in the correct situation. I would recommend you read the book http://www.transcendingcss.com/if you want to learn more about when to use which one, and CSS styling in general.
Float 并不比 Position 好，Position 也不比 Float 好——两者都应该在正确的情况下使用。如果您想了解更多关于何时使用哪一个以及 CSS 样式的更多信息，我建议您阅读http://www.transcendingcss.com/一书。
See here for an example: http://transcendingcss.com/blog/about/changingman_layout_updated/
见这里的例子：http: //transcendingcss.com/blog/about/changedman_layout_updated/
回答by remi bourgarel
Absolute : your element is positioned to the first parent element with a position other than static (it must be explicit, even if the default position is relative)
Absolute ：您的元素定位到第一个父元素的位置不是静态的（它必须是显式的，即使默认位置是相对的）
Relative : your element is positioned to its last sibling with a relative position
相对：您的元素定位到具有相对位置的最后一个兄弟元素
Float : for instance if it's left, your element will move as far as it can to the left (depending on other element and its width, the elements before won't be affected, the elements after will flow around it.
Float ：例如如果它在左边，你的元素会尽可能向左移动（取决于其他元素和它的宽度，之前的元素不会受到影响，之后的元素会围绕它流动。
Ref:
参考：
http://www.w3schools.com/css/css_positioning.asp
http://www.w3schools.com/css/css_positioning.asp
回答by Adeel
we use floatas absolutepositioning does not work for variable height columns.
我们使用float作为absolute定位为可变高度的列不起作用。
When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go
当您指定时position:absolute，元素将从文档中删除并准确放置在您告诉它去的位置
If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
如果指定position:relative，则可以使用 top 或 bottom 以及 left 或 right 相对于它在文档中通常出现的位置移动元素。
Source: http://www.barelyfitz.com/screencast/html-training/css/positioning/
来源：http: //www.barelyfitz.com/screencast/html-training/css/positioning/
回答by pixeltocode
i agree with Frozenskys, neither are actually better but floatkeeps the element within the document flow while positionremoves the element from the document flow, so i've found floatworks better across more browsers and my IE specific CSS is smaller when i use float
我同意 Frozenskys，实际上两者都不是更好，但浮动将元素保留在文档流中，而位置从文档流中删除元素，所以我发现浮动在更多浏览器中效果更好，并且当我使用浮动时，我的 IE 特定 CSS 更小
回答by Paul D. Waite
As mentioned above, it's not a general better/worse issue, but:
如上所述，这不是一个普遍的更好/更坏的问题，而是：
Absolute positioning removes an element from the document's flow. The element given absolute positioning will no longer affect the layout of other elements in the document.
绝对定位从文档流中删除一个元素。给定绝对定位的元素将不再影响文档中其他元素的布局。
As such, it's usually not the right choice for doing an entire page layout unless you know what the width and height of all your content is going to be.
因此，除非您知道所有内容的宽度和高度，否则它通常不是进行整个页面布局的正确选择。
回答by Chris
I know this is an old string but here goes: I found that when I have complete information on the nature and amount of content, and the nature and amount of content tends to not change, then positioning attributes give me more control over my layout appearance. If the nature and amount of content needs more flexibility due to frequent changes, then float will give me that flexibility, but does not generally give me as much control over appearance.
我知道这是一个旧字符串，但这里是：我发现当我有关于内容的性质和数量的完整信息，并且内容的性质和数量往往不会改变时，定位属性可以让我更好地控制我的布局外观. 如果内容的性质和数量由于频繁变化而需要更大的灵活性，那么浮动会给我这种灵活性，但通常不会让我对外观有那么多的控制。
I don't always need the precision of positioning but I'm glad it's there when I do need it.
我并不总是需要定位的精确度，但我很高兴在我需要的时候它就在那里。
Of course, it also depends upon how well you know your html/css and how much time you are willing to spend coding in order to get around the limitations for one attribute or another.
当然，这还取决于您对 html/css 的了解程度以及您愿意花多少时间进行编码以避开某个属性的限制。
For example, <h2>gives you a large bold heading title understood by all browsers, but you can do the same thing with <p>if you are willing to add the styling attributes to make your bold heading to designed specifics. It's more work, mostly unnecessary, but can be done.
例如，<h2>为您提供所有浏览器都能理解的大粗体标题，但<p>如果您愿意添加样式属性以使粗体标题符合设计细节，则可以执行相同的操作。这是更多的工作，大多是不必要的，但可以完成。
Generally, it's better to do as little coding as possible, using established elements, attributes and values, and as few hacks as possible. That is the point behind the HTML5 standards. Use positioning when you need it, but use float when you can.
通常，最好尽可能少地编写代码，使用已建立的元素、属性和值，并尽可能少地进行 hack。这就是 HTML5 标准背后的要点。在需要时使用定位，但在可能时使用浮动。
Great site. Good contributors. I learn a lot.
很棒的网站。好的贡献者。我学到了很多。
回答by Kerido
Depending on your purposes, it may be better or worse. The good side is that it doesn't change the positioning mechanism. The bad side is that you can't do some tricks (i.e. element overlapping) with it. Float is only good for attaching an element to either edge of a parent element.
根据您的目的，它可能更好或更糟。好的一面是它不会改变定位机制。不好的一面是你不能用它做一些技巧（即元素重叠）。Float 仅适用于将元素附加到父元素的任一边缘。
