0

If you have a parent window with display block. Any children within that element that are being floated will be displayed with the parent window "collapsed".

For example:

 <div>
    <p style="float: left;">Stuff</p>
    <p style="float: right;">More stuff</p>
 </div>

Will render with both <p> outside of <div>. However, if you change <div> to display: inline-block... it will not "collapse". Why...what's going on behind the scenes here that I'm not understanding?

KarthikNayak98
  • 363
  • 3
  • 13

1 Answers1

0

As the documentation says :

The element is removed from the normal flow of the page

If you want your div element height considering your p elements, you should use something else than float property. You can use Flexible Box Layout for instance

Pof
  • 829
  • 5
  • 20