Are floats bad? What should be used in its place

Floats were never meant for layout.

They’re simply meant to take an element, put it to one side, and let other content flow around it. That’s all.

The early web was influenced by print/academic publications where floats are used to control the flow of figures and tables in text.

So why did we use them for layout?

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.

The CSS Flexible Box Layout Module and the CSS Grid Layout Module are as of this writing W3C candidate recommendation and candidate recommendation draft respectively. Both were optimized for user interface design and complex layouts and are expected to complement each other. flexbox focuses on bottom-up 1 dimensional layouts and grid focuses on top-down 2 dimensional layouts.

flexbox is supported by all major browsers and has known issues in IE11. grid is supported by all major browsers but IE11 supports an older version of the spec.


This question is from 2012 and the other answers are outdated.

Floats should not be used for layout anymore (though you can still use them for the original purpose - floating text around images).

Flexbox is now widely supported and is better for layout.


Floats should work fine, although it depends on how you've used it - how about a link to your design?

inline-block doesn't work correctly in Internet Explorer versions less than 8: http://www.quirksmode.org/css/display.html

Tags:

Html

Css