x
<html><head><style>div { border: 3px solid #4CAF50; padding: 5px;}.img1 { float: right;}.clearfix { overflow: auto;}.img2 { float: right;}</style></head><body><h2>Clearfix</h2><p>В этом примере изображение выше, чем содержащий его элемент, и оно плавающее, поэтому оно выходит за пределы своего контейнера:</p><div> <img class="img1" src="../images/pineapple.jpg" alt="Pineapple" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div><p style="clear:right">Добавьте класс clearfix с overflow: auto; к содержащему элементу, чтобы исправить эту проблему:</p><div class="clearfix"> <img class="img2" src="../images/pineapple.jpg" alt="Pineapple" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div></body></html>