Выполнить »
×
Изменить ориентацию
Открыть на Codepen
Изменить тему, Темная/Светлая
<!DOCTYPE html> <html> <head> <style> div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } .clearfix::after { content: ""; clear: both; display: table; } .img2 { float: right; } </style> </head> <body> <p>В этом примере изображение выше, чем содержащий его элемент, и оно плавающее, поэтому оно выходит за пределы своего контейнера:</p> <div> <h2>Без Clearfix</h2> <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 к содержащему элементу, чтобы решить эту проблему:</p> <div class="clearfix"> <h2>Из Clearfix</h2> <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>
