Pourquoi la marge s'effondre-t-elle lorsque le dégagement existe?

Question

l'état spec que:

La marge inférieure d'un élément de type bloc en flux effondrements toujours avec la marge supérieure de son frère suivant de niveau bloc dans l'écoulement, à moins que frère a dégagement.

Mais j'ai trouvé quelque chose d'inattendu. Le code est comme suit.

<div style="margin-bottom: 100px; "></div> 
<div style="float:left;width:10px;height: 10px; background: red"></div> 
<div style="margin: 100px;clear: left"></div> 
test 

la marge inférieure de la première div et la marge de la troisième effondrement div, ce qui porte atteinte "à moins que frère a dégagement.

Comment expliquer la situation? Pouvez-vous me donner un exemple concret pour expliquer la règle ci-dessus avec plus de précision?

Answer 1

La prémisse de la question est incorrecte. Pour tous les scénarios sauf un, les marges ne s'effondrent pas.

Le cas le plus simple est de Chrome, le cas dans l'exemple donné, le troisième élément ne ont dégagement, la marge inférieure de la première div ne se replie pas avec les marges du troisième div, et la clairance calculée est -90px. Donc, le haut de la troisième boîte est à 100px + 100px - 90px = 110px du haut du conteneur.

Ce calcul est décrit dans l'exemple 2 du CSS 2.2 Spec pour la propriété clear. De même, dans Firefox ou Edge, si l'exemple est précédé d'un contenu, ou même si le corps a simplement une bordure supérieure, alors les marges ne s'affaissent pas et le jeu est de -90px;

Les cas exceptionnels sont dans Firefox et Edge lorsqu'il n'y a pas de contenu précédent ou de bordure supérieure à corps. Dans ce cas, Edge ne réduit pas les marges et calcule l'autorisation à 0. Firefox réduit les marges.