Свойство clear
"Очистка" обтеканий (float). Перемещает элемент под плавающий элемент. Может применяться как к плавающим элементам так и к обычным
clear: both;
Значения
clear: none;
Очистки обтеканий нет
clear: left;
Элемент, который идет после элемента с float: left; будет перемещен на новую строку
<style>
.image-fl {
float: left;
margin-right: 10px;
}
.clear-left {
clear: left;
}
</style>
<div class="example-1">
<img class="image-fl" src="https://placehold.it/100x100/333" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Eos, fugit facere praesentium inventore.</p>
<div class="clear-left"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ducimus quis aperiam perspiciatis adipisci esse blanditiis id nostrum consequuntur reprehenderit. Quasi ut magnam laudantium perspiciatis beatae odio quibusdam cum nesciunt.</p>
</div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, fugit facere praesentium inventore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ducimus quis aperiam perspiciatis adipisci esse blanditiis id nostrum consequuntur reprehenderit. Quasi ut magnam laudantium perspiciatis beatae odio quibusdam cum nesciunt.
clear: right;
Элемент, который идет после элемента с float: right; будет перемещен на новую строку
<style>
.image-fr {
float: right;
margin-left: 10px;
}
.clear-right {
clear: right;
}
</style>
<div class="example-2">
<img class="image-fr" src="https://placehold.it/100x100/333" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Eos, fugit facere praesentium inventore.</p>
<div class="clear-right"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ducimus quis aperiam perspiciatis adipisci esse blanditiis id nostrum consequuntur reprehenderit. Quasi ut magnam laudantium perspiciatis beatae odio quibusdam cum nesciunt.</p>
</div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, fugit facere praesentium inventore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ducimus quis aperiam perspiciatis adipisci esse blanditiis id nostrum consequuntur reprehenderit. Quasi ut magnam laudantium perspiciatis beatae odio quibusdam cum nesciunt.
clear: both;
Очистка всех обтеканий
<style>
.image-fr {
float: right;
margin-left: 10px;
}
.image-fl {
float: left;
margin-right: 10px;
}
.clear {
clear: both;
}
</style>
<div class="example-3">
<img class="image-fl" src="https://placehold.it/100x100/333" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Eos, fugit facere praesentium inventore.</p>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ducimus quis aperiam perspiciatis adipisci esse blanditiis id nostrum consequuntur reprehenderit. Quasi ut magnam laudantium perspiciatis beatae odio quibusdam cum nesciunt.</p>
<img class="image-fr" src="https://placehold.it/100x100/333" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Eos, fugit facere praesentium inventore.</p>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ducimus quis aperiam perspiciatis adipisci esse blanditiis id nostrum consequuntur reprehenderit. Quasi ut magnam laudantium perspiciatis beatae odio quibusdam cum nesciunt.</p>
</div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, fugit facere praesentium inventore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ducimus quis aperiam perspiciatis adipisci esse blanditiis id nostrum consequuntur reprehenderit. Quasi ut magnam laudantium perspiciatis beatae odio quibusdam cum nesciunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, fugit facere praesentium inventore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ducimus quis aperiam perspiciatis adipisci esse blanditiis id nostrum consequuntur reprehenderit. Quasi ut magnam laudantium perspiciatis beatae odio quibusdam cum nesciunt.