Why Float is better than position:relative and absolute while we can make layout quickly with position?
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 "maincont开发者_开发技巧ent" first and "leftsidebar" second in source order which is good for SEO.
please explain things with example demo page.
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.
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/
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 relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
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
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/
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
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.
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.
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.
None of both is suitable for creating layouts.
- Floats are meant to be used in images that you want the text to wrap around.
- Position absolute is meant to place elements with some kind of x and y coordinates.
Floats were used 10 years ago to create layouts, but not anymore because using floats for layouts is hacky. Floats are not meant to be used to create layouts, but at that time, it was better than tables. And now they are outdated.
Nowadays, if you want to make a layout you should use CSS Grid, that's what it's meant for. Check this article to learn how to use it: https://css-tricks.com/snippets/css/complete-guide-grid/
This is an example of how to use 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>
加载中,请稍侯......
精彩评论