CODEWITHSUNDEEP
htmlcss
AlphaDu
AlphaDu

Reputation: 81

Several HTML render distinctions about BFC

Here is three html css code

https://jsfiddle.net/cspy1n9w/2/

https://jsfiddle.net/fdj9gu5z/

https://jsfiddle.net/j5p74vw3/


    <div class="out">
      <div class="in">
      </div>
    </div>
    <style>
    .out {
      background: red；
    }
    .in {
        margin: 10px
    }

result: out 0px height


    <div class="out">
        <div class="in">
        </div>
    </div>
    <style>
    .out {
        background: red;
        display: flow-root;
    }
    .in {
        margin: 10px
    }
    </style>

result: out 10px height


    <div class="out">
        <div class="in">
        </div>
    </div>
    <style>
    .out {
        background: red;
        display: flow-root;
    }
    .in {
        margin: 10px
        display: flow-root;
    }
    </style>

result: out 20px height

The question is why the second(only out is BFC) is 10px height.It's only contain margin-top of 'inner' class, why margin-bottom exclude ? I think 'out' is a bfc so it's child should contain in it entirely including margin top and bottom.

Upvotes: 0

Views: 39

Answers (1)

Temani Afif
Temani Afif

Reputation: 273004

A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) collapse. ref

This apply to your second case making the total margin inside .out equal to only 10px thus a height of 10px

By adding flow-root to .in you create a BFC and you disable that margin collapsing

Upvotes: 1

Related Questions