clear

Общая информация

Свойство clear позволяет отменить обтекание объектов с указанных сторон или разместить элемент с новой строки.

Синтаксис и значения

clear: left || right || both || none || inherit
  • left - запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
  • rigth - запрещает обтекание элемента с правой стороны
  • both - запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами
  • none - отменяет свойство, обтекание будет производиться согласно значению свойства float
  • inherit - наследует значение родительского элемента для данного свойства

Примеры

Пример 1.

css:
.block1 {  
float: left;  
width: 200px;  
background-color: #919ea5;  
}  
  
.block2 {  
width: 250px;  
background-color: #df6901;  
clear: both; /* отменяет обтекание и выводит блок block2 с новой строки */  
} 
html:
<div class="block1">Блок block1, выравненный по левому краю</div> 
<div class="block2">Блок block2 показан с новой строки, т.к. свойство clear отменяет обтекание.</div>
результат:
Блок block1, выравненный по левому краю
Блок block2 показан с новой строки, т.к. свойство clear отменяет обтекание.

форматирование

Добавить комментарий

Имя*
Ответ*