Advanced Search

Clearing a float container (:after method)

/ Published in: CSS
Save to your folder(s)
When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. Those familiar only with Explorer for Windows may scratch their heads and say "That's not right!" True, IE/Win does enclose a float within a container 'automatically', but only if the container element happens to possess the MS-only quality called hasLayout.

This site has other methods of achieving the same effect, [http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/](http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats//) , depends on your scenario.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .clear-fix:after {
  2.     content: ".";
  3.     display: block;
  4.     height: 0;
  5.     clear: both;
  6.     visibility: hidden;
  7. }
  8.  
  9. /* Place the following in a conditional stylesheet for IE */
  10. .clearfix {
  11.     zoom: 1; /* triggers hasLayout */
  12. }

URL: http://www.positioniseverything.net/easyclearing.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.