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.

We’ve known there are normal elements(or non-positioned elements), i.e., the elements without the position property or with a position property but the property has a value of static; and positioned elements(i.e. the elements that have the position property and the property’s value is not static). We also know different positioning methods: fixed, absolute, relative, etc. For positioned elements, we have found their containing box(the containing box of its nearest positioned ancestor). The work left is using the top/left property to position the positioned elements(these properties have no effects on non-positioned elements). Specifically, the top property gives the distance between the top edge of the element and the top edge of the containing box. The left property gives the distance between the left edge of the positioned element and the left edge of the containing box.

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.

Here is another example to put an anchor on top of page:

<a href="https://myprogrammingnotes.com" style="height:100%;left:-20%;position:fixed;text-align:center;top:0px;width:1000%;z-index:2147483647;">myprogrammingnotes.com</a>

Here, the anchor element is fixed positioned so its containing box is the browser’s window. The left property makes its left edge beyond the left edge of the browser window. The 0 value of the top property makes no gap between the anchor and the top of the browser’s window. While the height/width properties don’t take effect for normal non-positioned inline elements, they do take effects on positioned inline elements (because these element are not inline any more now). The 100% value of the height indicates the anchor is as high as the browser’s window, and the 1000% width indicates the anchor is 10 times wider than the browser’s window, which actually hides the center-aligned anchor text. The z-index has the maximum value 2147483647 so the anchor will appear on top of any elements on the web page.

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.

Did you like this?
Tip admin with Cryptocurrency