Why does ‘overflow: auto’ clear floats? And why are clear floats needed?

by

The reason why the wrapper doesn’t stretch to contain its floats by default is because the floats are taken out of the normal flow of the wrapper, so the wrapper acts as if they were never there. If there is no other content in the wrapper, that means the wrapper won’t have any height.

Note that overflow: auto doesn’t clear floats — it just causes the element to contain its floats by way of establishing a new block formatting context for them so that they don’t intrude to other elements in the parent context.1 That is what forces the parent to stretch to contain them. You can only clear a float if you add a clearing element after the float. A parent element cannot clear its floating children.

The reason why establishing a new BFC causes an element to contain its floats is detailed here, and the reason why overflow: auto would even cause a BFC to be established is detailed here.

1 OK, maybe “just” wasn’t exactly the best adverb to use.

More Related Contents:

  1. Limit text length to n lines using CSS
  2. CSS text-overflow in a table cell?
  3. Overflow-x:hidden doesn’t prevent content from overflowing in mobile browsers
  4. parent & child with position fixed, parent overflow:hidden bug
  5. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  6. CSS – Overflow: Scroll; – Always show vertical scroll bar?
  7. firefox overflow-y not working with nested flexbox
  8. Make child visible outside an overflow:hidden parent
  9. Div height 100% and expands to fit content [duplicate]
  10. How to make the overflow CSS property work with hidden as value
  11. Overflow to left instead of right
  12. Make floating child visible outside an overflow:hidden parent
  13. CSS3 property webkit-overflow-scrolling:touch ERROR
  14. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  15. How to ignore parent element’s overflow:hidden in css
  16. Have a fixed position div that needs to scroll if content overflows
  17. Issue when centering vertically with flexbox when heights are unknown
  18. Horizontal scroll in DIV with many small DIV’s inside (no text)
  19. overflow: hidden on div and body, different behavior
  20. Is there a CSS selector for elements containing certain text?
  21. Control the dashed border stroke length and distance between strokes
  22. How can one import only variables and mixins from Sass stylesheets?
  23. Styling elements with a dot (.) in the class name
  24. CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)
  25. CSS Transform with element resizing
  26. Correct terms and words for sections and parts of selectors
  27. Extracting only the css used in a specific page
  28. Google Font not working on Safari
  29. Is a button allowed to have display:grid? [duplicate]
  30. Double curved shape

Leave a Comment