为什么Float优于position:relative和absolute而我们可以用position快速布局？在经济衰退时期，时间非常重要。
当我们制作 2-col、3-col 或 multi-col 布局，然后在布局 div 中定位其他元素时。
世界上大多数人都喜欢 Float 。为什么 Float 优于 position:relative和 position:absolute给 <body> 中的任何元素定位和其他嵌套元素？
如果使用 position: 布局页面/设计，我们可以创建一个设置为 position:relative 的容器 div，允许标题、内容和导航 divs在容器 div 内设置为 position:relative，允许这些 divs相对于容器 div 定位。
通过定位我们可以保持"maincontent"首先和"leftsidebar"对 SEO 有利的源代码顺序中的第二位。
请使用示例演示页面进行解释。
最佳答案
绝对定位将元素从正常文档流中取出。对于普通元素，任何绝对定位的元素都将被完全忽略。
这在很多情况下都会中断。想到的主要一个是将元素放在彼此下面。使用您的列示例，确保您绝对可以放置 3 列，但您不能在页面上将任何内容放在该列下方，因为流程仍在页面顶部。 “绝对”元素不会影响后续内容的来源。
对于 float ，您只需在其后放置一个元素，它环绕在 float 元素周围或下方。
这并不是说它没有用。当您想在网页上弹出一个“层”时，定位非常有用。
一个简短的例子......以这个常见的 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>
...
对于 float ，您将使用此 CSS:
.column1, .column2, .column3 {
float: left;
width: 200px;
}
h2 {
clear: both;
}
一切都会好起来的。让我们绝对定位列:
.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;
}
自己尝试一下(每列中包含更多内容)，看看第二个标题会发生什么情况 - 它总是在第一个标题的正下方，就好像这些列不存在一样。实际上，第二个标题大部分会被列隐藏，因为它们位于文档的顶部。
除非列的高度是固定的，否则不可能知道将标题放在列下方的什么位置。如果您希望每个标题下有更多列，情况会更糟。
老实说，试一试并尝试使用绝对定位的漂亮布局。您很快就会明白它的缺点。
关于html - 为什么 Float 优于位置 :relative and absolute while we can make layout quickly with position?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2317219/