freeCodeCamp

4.4 KiB

Raw Blame History

title	localeTitle
Float and Clear	Float и Clear

Float и Clear

Свойство CSS float указывает, как элемент должен плавать.

Свойство CSS clear указывает, какие элементы могут плавать рядом с очищенным элементом и с какой стороны.

Свойство `float`

Свойство float используется для позиционирования и компоновки на веб-страницах.

Свойство float может иметь одно из следующих значений:

left - Элемент плавает слева от контейнера right - Элемент плавает справа от контейнера none - Элемент не плавает (будет отображаться только там, где он встречается в тексте). Это значение по умолчанию inherit - элемент наследует значение float своего родителя В своем простейшем использовании свойство float можно использовать для обертывания текста вокруг изображений.

Поплавок в картинке:

img { 
    float: right; 
 }

В этом примере указано, что изображение должно плавать вправо на странице:

img { 
    float: left; 
 }

В этом примере указано, что изображение должно плавать влево на странице:

img { 
    float: none; 
 }

В следующем примере изображение будет отображаться только там, где оно встречается в тексте ( float: none; ):

`clear` собственность

Свойство clear указывает, какие элементы могут плавать рядом с очищенным элементом и с какой стороны.

Свойство clear может иметь одно из следующих значений:

none - Позволяет плавающие элементы с обеих сторон. Это значение по умолчанию left - плавающие элементы не разрешены с левой стороны right - плавающие элементы не допускаются с правой стороны both - не допускаются плавающие элементы на левой или правой стороне inherit - элемент наследует четкое значение своего родителя Самый распространенный способ использования свойства clear - после использования свойства float для элемента.

При очистке поплавков вы должны сопоставлять clear с float . Если элемент перемещается left , вы должны clear его left . Ваш плавающий элемент будет продолжать float , но очищенный элемент появится под ним на веб-странице.

Пример:

Источник: CSS-TRICS

div { 
    clear: left; 
 }

Источник: CSS-TRICS

Дополнительные ресурсы:

MDN CSS: Float & Clear
Учебники W3Schools
CSS-трюки: float & clear

4.4 KiB Raw Blame History Unescape Escape