0

The code below stops the clearfix parent element from collapsing when both of it's children are floated.

Can anyone tell me how / why it works?

.clearfix {
  overflow: hidden; /* can also be "auto" */
}
<div class="clearfix">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>
Pedram
  • 15,766
  • 10
  • 44
  • 73
q126y
  • 1,589
  • 4
  • 18
  • 50
  • https://css-tricks.com/all-about-floats/#article-header-id-2 – Temani Afif Feb 17 '18 at 10:57
  • @TemaniAfif It says "the parent will expand to contain the floats, effectively clearing it for succeeding elements." But float removes the elements from the normal HTML flow, so the question was, why parent expands to contain the elements? – q126y Feb 17 '18 at 11:04
  • 1
    you have to read carefully :) check this : https://stackoverflow.com/questions/12783064/why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t/12783114#12783114 – Temani Afif Feb 17 '18 at 11:05
  • 1
    i added many links with very detailed answer that also links to the specification, so take time to read them and also their link and you will understand ;) – Temani Afif Feb 17 '18 at 11:07
  • @TemaniAfif Thanks! – q126y Feb 17 '18 at 11:08

0 Answers0