为什么Float比位置更好:相对和绝对,而我们可以快速进行位置布局？在经济衰退时期,时间非常重要.
当我们制作2-col,3-col或multi-col布局,然后在布局div中定位其他元素.
在Float中,世界上大多数人都喜欢.为什么浮动优于position:relative并position:absolute给位置中的任何元素<body>和其他嵌套元素？
如果使用position:来布局页面/设计,我们可以创建一个容器div,它被设置为position:relative,允许divs容器div内的header,content和nav 设置为position:relative,允许它们divs相对于容器div.
并且通过定位我们可以保持"maincontent"第一和"leftsidebar"第二的源顺序,这对SEO有利.
请用示例演示页面解释一下.
Dis*_*oat 17
绝对定位将元素从正常文档流中取出.关于普通元素,任何绝对定位的元素都会被完全忽略.
这在许多情况下都会中断.想到的主要因素是将元素放在彼此之下.使用您的列示例,确保您绝对可以放置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;
}
自己尝试一下(每列中有更多内容),看看第二个标题会发生什么 - 它总是在第一个标题下面,好像列不在那里.实际上,第二个标题将主要由列隐藏,因为它们分层在文档的顶部.
除非列是固定高度,否则无法知道将该标题放在列的下方.如果你想在每个标题下有更多的列,情况会更糟.
老实说,只需尝试一下,尝试使用绝对定位的漂亮布局.你很快就会明白它的失败.
float不会破坏文档流 - 而且，它会将它使用的任何元素放置在最适合容器宽度的位置 - 假设我在 800px 宽度的容器中有 5 x 200px div，最后 5 个将进入“新”线”低于其他线 - 使用position:relative将使您需要计算何时需要打破自己，并且它不会正确打破，因为它将display要么是block并超过整个宽度，要么是inline-block或inline将不会渲染与 div 的方式相同，block并且会严重扰乱文档流程和布局。
这取决于您想要执行的操作：position:relative用于将元素移动到远离其自然位置的位置，而float将使其弹出到父元素中最左侧或最右侧的位置。position:absolute会让您相对于最近定位的祖先定位它（而不是相对于视口定位，如固定）。然而; 如果绝对定位的元素没有定位的祖先，则它使用文档主体，并随着页面滚动而移动。
| 归档时间： |
|
| 查看次数： |
22637 次 |
| 最近记录： |