Why does overflow hidden stop floating elements escaping their container?

by

It creates a block formatting context.

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning
and clearing of floats apply only to things within the same block
formatting context. Floats do not affect the layout of things in other
block formatting contexts, and clear only clears past floats in the
same block formatting context.

see also: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

More Related Contents:

  1. Applying an ellipsis to multiline text [duplicate]
  2. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  3. CSS – How to Style a Selected Radio Buttons Label?
  4. Table with fixed header and fixed column on pure css
  5. Favicon not showing up in Google Chrome [duplicate]
  6. Why can’t I center with margin: 0 auto?
  7. Apply CSS styles to an element depending on its child elements [duplicate]
  8. CSS background image alt attribute
  9. 3 column layout HTML/CSS
  10. HTML5 / CSS3 Circle with Partial Border
  11. Why display grid with 100% in grid-template-columns goes out of body?
  12. Can I use non existing CSS classes?
  13. Why are dashes preferred for CSS selectors / HTML attributes?
  14. Style not working for innerHTML in Angular [duplicate]
  15. How to Set Height for the Drop Down of Select box
  16. Is it possible to always show up/down arrows for input “number”?
  17. How to center-align one flex item and right-align another using Flexbox [duplicate]
  18. When I try to shift the image upwards using negative margin the whole container is moved upwards
  19. What is the browser-default background color when selecting text?
  20. How to center image horizontally within a div element?
  21. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  22. What’s the difference between HTML’s and CSS’s width attribute?
  23. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  24. How do I make flex box work in safari?
  25. Zebra striping a flexbox table with wrapping items
  26. Removing unwanted table cell borders with CSS
  27. Bootstrap row and col explanation
  28. How do I make a text input non-editable?
  29. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment