Why Float is better than position:relative and abs

2019-01-17 12:16发布

站内问答 / HTML/CSS
939 9 6

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.

when we make 2-col, 3-col or multi-col layout and then position other elements in layout divs.

Most of the world favor in Float . Why Float is better than position:relative and position:absolute to give position any element in <body> and other nested elements?

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 divs inside the container div to be set to position:relative, allowing these divs to be positioned relative to the container div.

and with positioning we can keep "maincontent" first and "leftsidebar" second in source order which is good for SEO.

please explain things with example demo page.

标签： html css xhtml
举报
9条回答
你好瞎i
2楼-- · 2019-01-17 12:51

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.

查看更多
0人赞 添加讨论(0) 举报
走好不送
3楼-- · 2019-01-17 12:54

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)

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.

Ref:

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

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

查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
4楼-- · 2019-01-17 12:55

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.

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:

<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:

.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.

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
5楼-- · 2019-01-17 12:56

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.

查看更多
0人赞 添加讨论(0) 举报
成全新的幸福
6楼-- · 2019-01-17 12:59

float will 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:relative will make you need to calculate when it needs to break yourself, and it won't break correctly since the display will either be block and go over the whole width or it will be inline-block or inline which won't render the same way for divs as block would and would pretty much mess up the document flow & layout.

It depends on what you want to do: position:relative is used to move the element a bit aside from it's natural location, whereas float will make it pop to the left-most or right-most position in the parent element. position:absolute will let you position it relatively to the whole html document.

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
7楼-- · 2019-01-17 13:00

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.

See here for an example: http://transcendingcss.com/blog/about/changingman_layout_updated/

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)