How does CSS ‘overflow:hidden’ work to force an element (containing floated elements) to wrap around floated elements?

by

Floats, absolutely positioned
elements, inline-blocks, table-cells,
table-captions, and elements with
‘overflow’ other than ‘visible’
(except when that value has been
propagated to the viewport) establish
new block formatting contexts.

In a block formatting context, each
box’s left outer edge touches the left
edge of the containing block (for
right-to-left formatting, right edges
touch). This is true even in the
presence of floats (although a box’s
line boxes may shrink due to the
floats), unless the box establishes a
new block formatting context (in which
case the box itself may become
narrower due to the floats).

The block formatting context clears the floats. Source: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

More Related Contents:

  1. Could someone explain this CSS code?
  2. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  3. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  4. Is there any way to hover over one element and affect a different element? [duplicate]
  5. How to change an input button image using CSS
  6. What is the difference between ‘>’ and a space in CSS selectors?
  7. Relationship between !important and CSS specificity
  8. Make a DIV fill an entire table cell
  9. Is there a CSS hack to affect Safari only NOT Chrome?
  10. Outlining and partially filling an SVG Shape
  11. Setting height: 100% on my label element doesn’t work
  12. Twitter Bootstrap – add top space between rows
  13. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  14. hover on child without hover effect on parent [duplicate]
  15. Add a css class to a field in wtform
  16. How can I use CSS3 transform on a span?
  17. What is this CSS selector? [class*=”span”]
  18. Bootstrap 3 Slide in Menu / Navbar on Mobile [closed]
  19. Remove “whitespace” between div element
  20. How do I Make Firefox Print a Background-Color Style?
  21. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  22. What does the double colon (::) mean in CSS?
  23. CSS text-decoration underline color [duplicate]
  24. How to add fonts to create-react-app based projects?
  25. Arrow Box with CSS
  26. CSS class repetition to increase specificity
  27. Where do the lost pixels go in a percent CSS layout? [duplicate]
  28. select second child
  29. Bootstrap 4 – no column wrapping
  30. How to specify table’s height such that a vertical scroll bar appears?

Leave a Comment