css float and positioning

At this time, you must have read a lot of tutorials about css float. I bet all you know is something like “floating elements makes the elements float to the left (or right “, and no more. But you are sure not to know exactly the way floating elements and other related elements are positioned.

We should know the process of the positioning of floating elements. The layout of ordinary elements is from top to bottom(for block elements) and from left to right(for inline elements). When encountering a floating element(an element with css float property including css float:left, css float:right), the browser pulls the element out of  the layout stream temporarily. The elements following the floating element are laid out normally, and most importantly, the browser remembers the current line (formed by the elements near the floating element except the fixed-positioned elements). Then (before fixed-positioned elements take effects)the floating element is laid on that line but to the left edge(or right edge), and the text of the normal elements after the floating element are reorganized so that they can flow down at the left/right edge of the floating element and wrap around below the bottom of the floating element.  Note that only text have this effect, the border and background won’t wrap around(so they may be covered by the floating element). Note that there is no such property as float:center. If you want to center a div block, you should use the margin property.

If we want elements with css float left but with no wrap text around,  we need to clear the related elements. An element styled with “clear:left” will be laid below any left-floating element earlier in the document, so all other elements after the element will also be laid below the floating element. “clear:right” and “clear:both” have similar semantic. In other words, when the html parser meets a “clear:both” element, it stops  rendering it and other elements below, but renders the floating elements above. After rendering previous floated elements, it continues to render the “clear:both” element and remaining elements.

With the clear property, non-floated elements can be laid below floated elements instead of being covered by the floated elements. But the world is not perfect. The margin between the floated elements and the non-floated elements does not consider the margin property of the non-floated elements(but the margin property of floated elements is still respected). So, you cannot separate the elements that are not floated apart from the elements that are floated by setting the margin property of the non-floated elements. They butt against each other. To solve this problem, you can insert an empty div(not floated) between them. The  empty div acts as an invisible line, but the margin between it and the non-floated elements below is calculated according to the margins of both. Another fix is wrapping the non-float elements inside a <div> and using the padding of the div to simulate the margin of the wrapped non-float elements.

Another related topic about element layout is the css position property. An element with “position:fixed” and top,right css attributes will be pulled out of the layout stream and positioned relative to the browser’s window. It can also have margin attributes which further adjust its position.  An element with “position:fixed” but without position attributes will also be pulled out of the layout stream but the current line is recorded(the current line is after all previous elements are positioned and formed by following elements including  floating elements), later the element will be put at that line(thus can possibly cover other elements). Many people are also confused about the css position: absolute vs fixed. They are almost the same except absolute position is relative to the parent element while fixed position is relative to the browser’s window(the screen) so the element with fixed positioning is really fixed, it is fixed somewhere on the screen, you cannot move it by scrolling up/down the page. There is another kind of position: relative. The relative position is relative to the normal position  of the element  in question in the flow. So relative, absolute, fixed are relative to normal position, the position of the parent element, and the viewport, respectively. To be stricter, the  “position:absolute” element is not necessarily  positioned relatively to it direct parent, but to the nearest ancestor that has been positioned. A positioned element is an element that has the position property and the value of the position property is not static(the default value). If there is no such positioned ancestor, the absolutely positioned element will be positioned relative to the <html> element. So, if you want to position an element relative to its container, in addition to adding a “position:absolute” with top/bottom/left/right property, you also need to add a “position:relative” property to its parent(the container). You do not need to add the top/bottom/left/right property to the container to let it be its natural position.

Here is an example for css position:

<html>
...
</html>
<p style="position:absolute; left:-2000px; top:-1000px;">xxxxx <a href="http://myprogrammingnotes.com">yyyy</a> zzzz</p>

This is so called invisible dark backlink hackers put  on victim websites. The <p> element are absolute positioned beyond the visible area through a negative left/top value.

Two elements side by side cannot share margin. So an element with 10% margin-right and an element with 10% margin-left will have a total margin of 20%.

A negative margin moves  the next element(which can have its own margin) toward this element.

When an element has both “position:fixed” and “float:xxx:, the float attribute has no effect.

Leave a Reply