Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Floats were never meant for layout.</strong></p> <blockquote> <p>They’re simply meant to take an element, put it to one side, and let other content flow around it. That’s all.</p> </blockquote> <p><strong>So why are we using them for layout?</strong></p> <blockquote> <p>Because you can clear a footer below two floated columns, float layout came into being. If there had ever been a way to “clear” elements below positioned elements, we’d never have bothered to use floats for layout.</p> </blockquote> <p><strong>Why are we still using them for layout?</strong></p> <p>Because better alternatives, like the <a href="http://www.w3.org/TR/css3-flexbox" rel="noreferrer">CSS Flexible Box Layout Module</a> and the <a href="http://www.w3.org/TR/css3-layout/" rel="noreferrer">CSS Template Layout Module</a> are still working drafts and are not supported by all browsers.</p> <p><strong>Why does your design break in IE 7,8 and 9?</strong></p> <p>There's probably a problem with your code, that is, you're not using floats right. This is not totally your fault, since they were never meant for layout in the first place. However, I can assure you that they work. I have been using floats for layout for a long time and was always able to make it work in most browsers.</p> <p><strong>Are inline blocks better?</strong></p> <p>Many layouts that can be done with floats can be done with inline blocks. However, they don't solve every layout problem and they were not meant for layouts as well. I find that one of them will usually be more suitable for the intended layout. </p> <p><em>References</em></p> <p><a href="http://meyerweb.com/eric/thoughts/2004/07/17/floats-dont-suck-if-you-use-them-right/" rel="noreferrer">Floats Don’t Suck If You Use Them Right</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload