Учитывая следующий HTML-код:
<html>
<body>
<head>
<style>
#myDiv{
background:orange;
width:300px;
}
.a{
margin:5px;
background:purple;
}
</style>
</head>
<body>
<div id="myDiv">
<p class="a">A<br>A</p>
<p class="b">B</p>
</div>
</body>
</html>
Почему при добавлении float:right к .a myDiv сжимается?
Согласны ли вы с моим ответом?
Поскольку CSS-плавающие являются свойствами позиционирования.Абзац, на который ссылается «a», позиционируется с помощью свойства float CSS и выходит из потока div «myDiv».Вот почему элемент 'a' расположен в правом углу div 'myDiv'.Браузер отображает «myDiv» без плавающего абзаца «a».Вот почему браузер только рисует фон за значением узла абзаца, на который ссылается 'b', и растягивает его на 300 пикселей в ширину, следуя декларации CSS элемента html head.