×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: CSS
Posted by: Dmitriy Motrenko
Added: Aug 31, 2014 9:01 AM
Views: 20
Tags: no tags
from stackoverflow
  1. It's worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives.
  2.  
  3. display: inline-block - Better
  4. Flexbox - Best (but limited browser support)
  5. Flexbox is supported from Firefox 18, Chrome 21, Opera 12.10, and Internet Explorer 10, Safari 6.1 (including Mobile Safari) and Android's default browser 4.4.
  6.  
  7. For a detailed browser list see: http://caniuse.com/flexbox.
  8.  
  9. (Perhaps once it's position is established completely, it may be the absolutely recommended way of laying out elements.)
  10.  
  11. A clearfix is a way for an element to automatically clear after itself, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.
  12.  
  13. The clearfix is a way to combat the zero-height container problem for floated elements
  14.  
  15. A clearfix is performed as follows:
  16.  
  17. .clearfix:after {
  18.   content: " "; /* Older browser do not support empty content */
  19.   visibility: hidden;
  20.   display: block;
  21.   height: 0;
  22.   clear: both;
  23. }
  24. Or, if you don't require IE<8 support, the following is fine too:
  25.  
  26. .clearfix:after {
  27.   content: "";
  28.   display: table;
  29.   clear: both;
  30. }
  31. Normally you would need to do something as follows:
  32.  
  33. <div style="float: left;">Sidebar</div>
  34. <div style="clear: both;"></div> <!-- Clear the float -->
  35. With clearfix, you only need to
  36.  
  37. <div style="float: left;" class="clearfix">Sidebar</div>
  38. <!-- No Clearing div! -->
  39. Read about it in this article - by Chris Coyer @ CSS-Tricks
Comments disabled