Блог

Вот три html css кода

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
    }

 

результат: высота 0 пикселей

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

 

результат: высота 10 пикселей

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

 

результат: высота 20 пикселей

Вопрос в том, почему второй(только выход-BFC) имеет высоту 10 пикселей.Он содержит только маржу-верх «внутреннего» класса, почему исключается маржа-низ ? Я думаю, что «out» — это bfc, поэтому его дочерний элемент должен содержаться в нем полностью, включая верхний и нижний поля.

В окно свою маржу рухнет ли мин-высота имущества равна нулю, и он не имеет ни верхней или нижней границы, ни верха ни низа подклада, и она имеет высоту как 0 или «авто», и он не содержит строку, коробки, и все ее притоку детей наценок (если таковые имеются) свернуть. ^ссылка

Это относится и ко второму вашему случаю, делая общую маржу внутри .out равной 10px , таким образом, только высоте 10px

Добавляя flow-root к .in вам, вы создаете BFC и отключаете сворачивание этого поля