Question

为什么Float优于position：relative和absolute，而我们可以快速进行布局？在经济衰退时期，时间非常重要。

当我们制作2-col，3-col或multi-col布局，然后将其他元素放在布局div中时。

世界上大多数人都喜欢Float。为什么Float比position:relative和position:absolute更好地为<body>和其他嵌套元素中的任何元素提供位置？

如果使用position：来布局页面/设计，我们可以创建一个容器div，它设置为position：relative，允许容器div内的header，content和nav divs设置为position：relative ，允许这些divs相对于容器div定位。

并且通过定位，我们可以保持"maincontent"第一和"leftsidebar"秒的源顺序，这对SEO有利。

请用示例演示页解释一下。

Answer 1

绝对定位将元素从正常文档流中取出。关于普通元素，任何绝对定位的元素都会被完全忽略。

这在许多情况下都会中断。想到的主要因素是将元素放在彼此之下。使用您的列示例，确保您绝对可以放置3列，但您不能在页面下方放置任何内容，因为流仍然位于页面顶部。 “绝对”元素不会影响以后内容的来源。

使用花车时，你只需要放一个元素然后它就会在浮动元素周围或下方包裹。

这并不是说它毫无用处。当您想要在网页上弹出“图层”时，定位非常有用。

一个简短的例子......采用这种常见的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>
...

使用浮动，你可以使用这个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;
}

自己尝试一下（每列中有更多内容），看看第二个标题会发生什么 - 它总是在第一个标题下面，好像列不存在一样。实际上，第二个标题将主要由列隐藏，因为它们分层在文档的顶部。

除非列是固定高度，否则无法知道将该标题放在列的下方。如果你想在每个标题下有更多的列，那就更糟了。

老实说，试一试，尝试使用绝对定位进行漂亮的布局。你很快就会明白它的失败。

Answer 2

Float并不比Position好，而且Position也不比Float好 - 两者都应该在正确的情况下使用。如果你想了解更多关于何时使用哪一本以及一般的CSS样式，我建议你阅读这本书http://www.transcendingcss.com/。

请点击此处查看示例：http://transcendingcss.com/blog/about/changingman_layout_updated/

Answer 3

绝对：你的元素被定位到第一个父元素，其位置不是静态的（即使默认位置是相对的，它也必须是显式的）

相对：您的元素定位到具有相对位置的最后一个兄弟

Float：例如，如果它离开，你的元素将尽可能向左移动（取决于其他元素及其宽度，之前的元素不会受到影响，之后的元素将围绕它流动。< / p>

参考：

http://www.w3schools.com/css/css_positioning.asp

http://www.w3schools.com/css/css_float.asp

Answer 4

我们使用float因为absolute定位不适用于可变高度列。

当您指定position:absolute时，该元素将从文档中删除，并准确放置在您告诉它的位置

如果指定position:relative，则可以使用顶部或底部，左侧或右侧来移动元素相对于文档中通常出现的位置。

来源：http://www.barelyfitz.com/screencast/html-training/css/positioning/

Answer 5

我同意Frozenskys，实际上两者都不是更好，但 float 将元素保留在文档流中，而 position 从文档流中删除元素，所以我发现 float 在更多浏览器中运行得更好，当我使用 float 时，我的IE特定CSS更小

Answer 6

如上所述，这不是一般更好/更糟的问题，但是：

绝对定位会从文档的流中删除元素。给定绝对定位的元素将不再影响文档中其他元素的布局。

因此，除非您知道所有内容的宽度和高度，否则通常不是进行整个页面布局的正确选择。

Answer 7

float不会破坏文档流程 - 同样，它会将它所使用的任何元素放置在容器宽度最合适的位置 - 比如我在800px宽度容器中有5 x 200px div，最后一个将进入另一个下方的“新行” - 使用position:relative将需要计算何时需要自行打破，并且由于display将会自动解决可以是block并覆盖整个宽度，也可以是inline-block或inline，它们不会像block那样呈现div的相同方式，而且会非常混乱文件流程＆amp;布局。

这取决于你想要做什么：position:relative用于将元素从它的自然位置移开一点，而float将使它弹出到最左边或最右边父元素中的位置。 position:absolute将允许您相对于最近的定位祖先（而不是相对于视口定位，如固定）定位它。然而;如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动。

Answer 8

根据您的目的，可能会更好或更糟。好的一面是它不会改变定位机制。不好的一面是你不能用它做一些技巧（即元素重叠）。 Float仅适用于将元素附加到父元素的任一边缘。

Answer 9

我知道这是一个古老的字符串，但这里说：我发现当我有关于内容的性质和数量的完整信息，以及内容的性质和数量往往不会改变时，定位属性让我有更多的控制权我的布局外观。如果由于频繁的变化，内容的性质和数量需要更多的灵活性，那么浮动将给我这种灵活性，但通常不会给我如此多的外观控制。

我并不总是需要定位的精确度，但我很高兴它在我需要的时候就在那里。

当然，这也取决于你对html / css的了解程度以及你愿意花多少时间来编码以解决一个或另一个属性的限制。

例如，<h2>为您提供了所有浏览器都能理解的大型粗体标题，但如果您愿意添加样式属性以使您的标题更加明确，则可以使用<p>执行相同操作设计细节。这是更多的工作，大多是不必要的，但可以做到。

通常，最好使用已建立的元素，属性和值以及尽可能少的黑客进行尽可能少的编码。这就是HTML5标准背后的重点。在需要时使用定位，但在可能时使用浮动。

很棒的网站。好贡献者。我学到了很多东西。

Answer 10

两者都不适合创建布局。

浮点数意在用于您希望文字环绕的图像中使用。
绝对位置是指放置具有某种x和y坐标的元素。

浮点数在10年前就用于创建布局，但现在已经不复存在了，因为使用浮点数进行布局很麻烦。浮点数并不是用来创建布局的，但那时它比表格好。现在它们已经过时了。

如今，如果要进行布局，则应使用 CSS网格，这就是这个意思。查看本文以了解如何使用它：https://css-tricks.com/snippets/css/complete-guide-grid/

这是如何使用CSS Grid的示例：

.grid-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-2 {
  display: grid;
  grid-template-columns: 10rem auto;
}

/* Not relevant */
body {margin:0;}
.grid-1 > div,
.grid-2 > div {
  padding: 1rem;
}
h2 {margin: 1.5rem 0 0.5rem;}
.bg-red {background: tomato;}
.bg-blue {background: royalblue;}
.bg-green {background: lightgreen;}
.bg-yellow {background: khaki;}

<h2>Example grid 1</h2>
<div class="grid-1">
  <div class="bg-red">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="bg-blue">The remaining space gets filled.</div>
</div>

<h2>Example grid 2</h2>
<div class="grid-2">
  <div class="bg-green">Fixed width column</div>
  <div class="bg-yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>

<div>The page continues...</div>

为什么Float比位置更好：相对和绝对，而我们可以快速进行位置布局？

10 个答案: