Containing Floats
Rather than clearing floats, another option is to contain the floats. The outcomes of containing floats versus those of clearing them are nearly the same; however, containing floats does help to ensure that all of our styles will be rendered properly.
To contain floats, the floated elements must reside within a parent element. The parent element will act as a container, leaving the flow of the document completely normal outside of it. The CSS for that parent element, represented by the
group class below, is shown here:1 2 3 4 5 6 7 8 9 10 11 12 13 | .group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } .group { clear: both; *zoom: 1; } |
There’s quite a bit going on here, but essentially what the CSS is doing is clearing any floated elements within the element with the class of
group and returning the flow of the document back to normal.
More specifically, the
:before and :after pseudo-elements, as mentioned in the Lesson 4 exercise, are dynamically generated elements above and below the element with the class of group. Those elements do not include any content and are displayed as table-level elements, much like block-level elements. The dynamically generated element after the element with the class of group is clearing the floats within the element with the class of group, much like the clear from before. And lastly, the element with the class of group itself also clears any floats that may appear above it, in case a left or right float may exist. It also includes a little trickery to get older browsers to play nicely.
It is more code than the
clear: both; declaration alone, but it can prove to be quite useful.
Looking at our two-column page layout from before, we could wrap the
<section> and<aside> elements with a parent element. That parent element then needs to contain the floats within itself. The code would look like this:HTML
1 2 3 4 5 6 7 | <header>...</header> <div class="group"> <section>...</section> <aside>...</aside> </div> <footer>...</footer> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } .group { clear: both; *zoom: 1; } section { float: left; margin: 0 1.5%; width: 63%; } aside { float: right; margin: 0 1.5%; width: 30%; } |
Layout with Contained Floats Demo
The technique shown here for containing elements is know as a “clearfix” and can often be found in other websites with the class name of
clearfix or cf. We’ve chosen to use the class name of group, though, as it is representing a group of elements, and better expresses the content.
As elements are floated, it is important to keep note of how they affect the flow of a page and to make sure the flow of a page is reset by either clearing or containing the floats as necessary. Failing to keep track of floats can cause quite a few headaches, especially as pages begin to have multiple rows of multiple columns.
No comments:
Post a Comment