CSS - Clearing floats - najnowsze rozwiązanie. Page last changed today A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats.
If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way. Let's try it. This is the CSS we'll use throughout the page: Now this happens: The left column. The right column. We want the black border to go around both our floating columns. The old solution to this problem required you to add an extra element with clear: both to the container.
Clearer div with clear: both This can be done either by adding the extra element in the HTML source code (as the example above does) or by using the :after pseudo-class to generate it. In any case, adding an HTML element for presentation's sake is something we've learned to avoid. The width is necessary to trigger "hasLayout" in Explorer Windows (except for 7).
A few points merit extra attention: Containing Floats (Complex Spiral Consulting) As powerful and useful as they are, floats can make for tricky layout tools.
Chances are that you may have seen something like the situation shown in Figure 1, which is accomplished with just two div elements, each with a floated image inside it. Figure 1. That's not right! This is probably not what the author had in mind, but given the styles used, it's the correct layout. Here's how we created it: That's all it takes. This is not a bug. Understanding the Problem So when in the name of all that's good and right would authors want floats to stick out of their containing elements? Figure 2. <p> ...text... The practice of flowing text around an image goes back a long, long time. Figure 3. So now we can see why it's important that floats stick out of their containing elements. Figure 4. That's something designers would never have accepted. A Clear Solution Now we apply the following rules to the preceding markup, and get the result shown in Figure 5. Figure 5. Set a Float to Fix a Float Summary. Gary Turner web development.
Developers who are new to css, or those who work primarily in IE, run into a vicious “bug” in Firefox and other modern browsers.
Their backgrounds disappear, or their borders do—but everything's fine in IE. The gnashing of teeth is heard throughout the land. The truth is, there's a reason for the behavior, and IE has screwed up again. The culprit is a wad bug known as hasLayout. I won't discuss it except in passing. In this demo, there are two ways to see what's going on, IE's way, and the right way. IE7 has internalized many of the IE6 bug work-arounds. Basic Non-Enclosed Float Notice that in the first box, the float element extends beyond the parent div. On a side note, IE does not properly handle collapsed margins when an element has layout. Now is the time for all good men to come to the aid of their country. This is non-float content. Using The Overflow Property Using The Display Property (Adds the inline-block display property to the demos.)
And so is this. Using a Float Parent.