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.

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.

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