Why Float is better than position:relative and abs

2019-01-17 12:16发布

站内文章 / HTML/CSS

27 0

老娘就宠你

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

回答1:

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.

回答2:

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.

回答3:

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/

回答4:

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

回答5:

we use float as absolute positioning does not work for variable height columns.

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go

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.

Source: http://www.barelyfitz.com/screencast/html-training/css/positioning/

回答6:

i agree with Frozenskys, neither are actually better but float keeps the element within the document flow while position removes the element from the document flow, so i've found float works better across more browsers and my IE specific CSS is smaller when i use float

回答7:

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.

回答8:

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.

回答9:

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.

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.

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.

Great site. Good contributors. I learn a lot.