CSS has some pretty cool features. Among my favorites were a couple of its declarations that deal with positioning. Specifically, the two CSS declarations I'm referring to are float and clear. These declarations can be applied to block elements, such as <div>, as well as inline elements, such as <img>. Block-level elements are elements that occupy 100% of the parent element's space, whereas inline elements are happy to share the horizontal space they reside within their parent element.

The notion of floating an element (such as a <div>) is that it relinquishes its demand to take up the entire horizontal line. In short, it collapses its space to only consume what it needs—instead of being greedy with the horizontal real estate available—and other elements can now reside beside it, instead of being pushed below it. This is true for when the element being floated does not take up the entire space. Elements that are floated beside it, when there is not enough room horizontally, will wrap down to the next line. With that being said, you can start to see how you can achieve some degree of responsive design by using the CSS float declaration to float elements.

The purpose of clearing is to control how the float takes effect. When you use the CSS declaration of clear on an element, you are basically instructing that element to not float up to the higher horizontal space—even if there is space to float up in. Remember, floating elements means that the element will take the highest vertical space it can take, provided that there is room, and that its adjoining elements have also been floated (especially for block-level elements that want to consume the entire horizontal space on their own). When there isn't sufficient space, it'll wrap down to the next highest available spot, and if there is enough space, it'll float up to be beside the other element. The exception to this is if you apply the clear declaration to it in its style or class, in which it will always behave as it wraps down—even when there's room higher up. Are we good on this? Cool.

Positioning elements via float and clear definitely works, and you can create some fairly sophisticated layouts by using them. But their effects may not always be what you want to see happen, as the viewport size gets smaller. In the world of responsive layout, having as much control as possible over your layout is paramount, and being limited to just floating and clearing can often make it a bit of a challenge to have your layout rearrange itself, given a wide array of viewport sizes—at least with as much precision as the next two options give you. Another thing that you need to get used to with floating elements is that you need to reorder the listing of elements on your page, depending on whether you're floating the elements to the left or to the right.

The reason I took a little more time here on float and clear is that it's an area where too many developers don't take the time to let it sink in. The takeaway point here is that you can get very far with just this layout technique, and, depending on the nature of the project and its requirements, it may be what the doctor ordered. Of course, there's more to say about float and clear in terms of design strategies, but that is a whole other book. As always, I recommend playing around with this layout technique/strategy.