Выполнить »
×
Изменить ориентацию
Открыть на Codepen
Изменить тему, Темная/Светлая
<!DOCTYPE html> <html> <head> <style> .div1 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #73AD21; } .div2 { border: 1px solid red; } .div3 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #73AD21; } .div4 { border: 1px solid red; clear: left; } </style> </head> <body> <h2>Без clear</h2> <div class="div1">div1</div> <div class="div2">div2 - Обратите внимание, что div2 стоит после div1 в HTML-коде. Однако, поскольку div1 перемещается влево, текст в div2 обтекает div1.</div> <br><br> <h2>Из clear</h2> <div class="div3">div3</div> <div class="div4">div4 - Здесь clear: left; перемещает div4 ниже плавающего div3. Значение "left" очищает элементы, перемещаемые влево. Вы также можете очистить "right" и "both".</div> </body> </html>
