2009
Mar
08

Specifics On Floated Elements

  • A left-floated box will shit to the left until its leftmost margin edge (or border edge if margins are absent) touches either the edge of the containing block, or the edge of another floated box.
  • If the size of the floated box exceeds the available horizontal space, the floated box will be shifted down.
  • Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of document flow.
  • Margins of floated boxes do not collapse with margins of adjacent boxes.
  • The root element () cannot be floated.
  • An inline element that is floated is converted to a block-level element.

Clear The Floats

The container div itself has no height and no float, since it only contains floating elements. Therefore the background color and border stubbornly stays at the top of the floating columns.

Clear Tthe Floats Bug

Soultion One: Float The Container

Example
  1. <div>
  2. <div style="float:left;width:30%;"><p>Some content</p></div>
  3. <p>Text not inside the float</p>
  4. <div style="clear:both;"></div>
  5. </div>

Soultion Two: Add Extra Markup

Example
  1. <div>
  2. <div style="float:left;width:30%;"><p>Some content</p></div>
  3. <p>Text not inside the float</p>
  4. <div class="clearfix"></div>
  5. </div>
Example
  1. .clearfix {
  2. clear: both;
  3. }

You could also do this with by means of a br tag with an inline style. In any case, you will have the desired result: the parent container will expand to enclose all of its children. But this method is not recommended since it adds nonsemantic code to your markup.

Soultion Three: The :after Pseudo-Element

The CSS class clearfix is applied to any container that has floating children and does not expand to enclose them.

Example
  1. .clearfix:after {
  2. content: ".";
  3. display: block;
  4. height: 0;
  5. clear: both;
  6. visibility: hidden;
  7. }

But this method does not work in Internet Explorer up to version 7, so an IE-only style needs to be set with one of the following rules:

Example
  1. .clearfix {
  2. display: inline-block;
  3. }
  4.  
  5. .clearfix {
  6. zoom: 1;
  7. }

Depending on the type of issue you are dealing with, one of the above two solutions will resolve the issue in Internet Explorer. It should be noted that the zoom property is a non-standard Microsoft proprietary property, and will case your CSS to become invalid.

Soultion Four: The Overflow Property

By far the best, and easiest solution to reslove the collapsing parent issue is to add overflow: hidden; or overflow: auto; to the parent element. However, this does not work in IE6. But, in many cases, the parent container will have a set width, which fixes the issue in IE6. If the parent container does not have a width, you can add an IE6-only style with the following code:

Example
  1. /* This fix is for IE6 only */
  2. *html .clearfix {
  3. height: 1%;
  4. overflow: visible;
  5. }

In IE6, the height property is incorrectly treated as min-height, so this forces the container to enclose its children. The overflow property is then set back to visible, to ensure the content is not hidden or scrolled.

The only drawback to using the overflow method (in any browser) is the possibility that the containing element will have scrollbars or hide content. If there are any elements with negative margins or absolute positioning inside the parent, the will be obscured if they go beyond the parent's borders, so this method should be used carefully. It should also be noted that if the containing element has to have a specified height or min-height, then you would definitely not be able to use the overflow method.

Demo

View Demo

Related Posts


回應 (Leave a comment)