Is float for layout bad? What should be used in its place?

by

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.

Eric A. Meyer, in Floats Don’t Suck If You Use Them Right

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

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.

Today, the CSS Flexible Box Layout Module flex and the CSS Grid Layout Module grid are optimized for user interface design and complex layouts and are expected to complement each other.

Grid enforces 2-dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts.

Flexbox and Grid are—as of this writing—W3C candidate recommendation and candidate recommendation draft, respectively. 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.

More Related Contents:

  1. Align elements side by side
  2. Child inside parent with min-height: 100% not inheriting height
  3. Select elements by attribute in CSS
  4. How to prevent long words from breaking my div?
  5. How can I center into a div?
  6. Canvas has white space at the bottom and scrolls too far
  7. How to make a floated div 100% height of its parent?
  8. HTML 5 strange img always adds 3px margin at bottom [duplicate]
  9. Disable webkit’s spin buttons on input type=”number”?
  10. How to make fixed header table inside scrollable div?
  11. Actual table Vs. Div table
  12. Align two inline-blocks left and right on same line
  13. Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
  14. What is the current state of the “scoped” attribute for the style element in HTML5?
  15. Proper way to apply CSS to HTML5 custom elements
  16. blur of part of Background image with css
  17. Adjacent divs with angled borders? [duplicate]
  18. Two Divs next to each other, that then stack with responsive change
  19. Make HTML5 video poster be same size as video itself
  20. How to align a div to the top of its parent but keeping its inline-block behaviour?
  21. Using background-attachment:fixed in safari on the ipad
  22. Overflow to left instead of right
  23. HTML / CSS Popup div on text click [closed]
  24. Custom tags… why not?
  25. Align text to the bottom of a div
  26. How to push a footer to the bottom of page when content is short or missing?
  27. How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/
  28. Is there a way to style HTML5’s range control?
  29. Background image not displaying in chrome browser
  30. Difference between and with text-align:center;?

Leave a Comment