Имеются два соседних блочных элемента. Первому задано свойство margin-bottom: 30px, второму margin-top: 30px и clear: left.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 100px;
background-color: rgb(199, 163, 163);
}
.sibling {
margin-bottom: 30px;
}
.latter-sibling {
clear: left;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="sibling">margin-bottom: 30px</div>
<div class="latter-sibling">margin-top: 30px; clear: left</div>
</body>
</html>
Почему при этом их внешние отступы схлопываются?
Согласно некоторым источникам, если задано свойство clear, отступы не дожны схлопываться:
Схлопываются отступы соседних элементов (за исключением случая, когда к последнему элементу применено свойство clear).
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
When using floats, ensure that the elements with collapsed margins are cleared past the floats. This prevents the margins from collapsing and maintains the desired spacing between elements.
https://medium.com/@stheodorejohn/mastering-margin...
В приведенном коде последнему элементу задано свойство clear: left. Почему тогда внешние отступы схлопываются?
Средний
