What is the best way to clear the CSS style “float”?

by

Update: In 2014, you should use a clearfix technique that utilized pseudo-elements, like the one mentioned by @RodrigoManguinho. This is the modern way of clearing floats. For an even more up to date method, see Nicholas Gallagher’s micro clearfix:

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Original Answer:

I really don’t like using extra non-semantic markup, so I stay away from using a clearing element. Instead of just apply overflow: hidden; to the parent of the float(s) to clear them. Works cross browser, no problem. I believe overflow: auto; also works.

Obviously, it won’t work if you want to use a different overflow property, but because of the IE6 expanding box bug, I rarely have a reason to purposely overflow my containers.

See more info on using overflow instead of clear to avoid adding extra markup.

More Related Contents:

  1. Prevent content from expanding grid items
  2. Position deeply nested elements in a higher level grid container
  3. Why don’t :before and :after pseudo elements work with `img` elements? [duplicate]
  4. CSS Property Border-Color Not Working
  5. Browsers’ default CSS stylesheets
  6. What are -moz- and -webkit-? [duplicate]
  7. How to add spacing between columns?
  8. “text-align: justify;” inline-block elements properly?
  9. How to rotate the background image in the container?
  10. How to dynamically add a class to manual class names?
  11. CSS animation delay in repeating
  12. Wave (or shape?) with border on CSS3
  13. How to style icon color, size, and shadow of FontAwesome Icons
  14. how to avoid extra blank page at end while printing?
  15. Set Google Maps Container DIV width and height 100%
  16. Transparent rounded corners on Google Map
  17. Fallback fonts on special characters
  18. Django Forms and Bootstrap – CSS classes and
  19. Apple-like scrollbars using CSS
  20. How do I extend a class/mixin which has dynamically formed selector
  21. Reuse CSS animation in reversed direction (by resetting the state?)
  22. Pure CSS animation visibility with delay
  23. Make table cells square
  24. CSS specificity or inheritance?
  25. Are there any cons to using color names in place of color codes in CSS?
  26. What is the difference between default, user and author style sheets?
  27. CSS – style a link based on its “rel” attribute?
  28. There is a 4px gap below canvas/video/audio elements in HTML5
  29. What is the difference between background-size: cover; and background-size: 100%;?
  30. CSS selector based on width?

Leave a Comment