Clear floats without structural markup


/ Published in: CSS
Save to your folder(s)

".clearfix" is the container that holds all of your floated elements. Works in all browsers that support "float" and "clear".


Copy this code and paste it in your HTML
  1. .clearfix
  2. {
  3. display: inline-table;
  4. /* Hides from IE-mac \*/
  5. height: 1%;
  6. display: block;
  7. /* End hide from IE-mac */
  8. }
  9.  
  10. html>body .clearfix
  11. {
  12. height: auto;
  13. }
  14.  
  15. .clearfix:after
  16. {
  17. content: ".";
  18. display: block;
  19. height: 0;
  20. clear: both;
  21. visibility: hidden;
  22. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.