Что такое свойство float в CSS?
В этой статье мы узнаем о свойстве float CSS с подходящими примерами всех доступных атрибутов.
Свойство float используется для изменения нормального потока элемента. Он определяет, как элемент должен плавать, и размещать элемент справа или слева от контейнера.
Общий синтаксис свойства float.
float: none|inherit|left|right|initial;
Примечание. Значение свойства float по умолчанию — none, и оно не будет работать с абсолютно позиционированным элементом.
Значения свойств поплавка
| Ценность | Описание |
|---|---|
| никто | Это значение по умолчанию для свойства float. Элемент не должен плавать. |
| наследовать | свойство должно быть унаследовано от его родительского элемента. |
| оставил | Поместите элемент справа от его контейнера. |
| Правильно | Поместите элемент слева от его контейнера. |
| исходный | Для свойства установлено значение по умолчанию. |
Пример свойства float с использованием значения float слева.
В приведенном ниже примере мы используем значение с плавающей запятой слева. После использования этого значения элемент должен оставаться в своем контейнере, как показано на изображении ниже.
float:left
HTML
<!DOCTYPE html><html><head> <title>Float Left</title> <style> img { float:left; /* element must be left on its container */ height: 100px; } div{ width:300px; height: 220px; box-shadow: 0px 2px 2px 2px; } </style></head><body> <div> <h1> float left...</h1> <p>The below picture must be left on its container.</p> <p>The GeeksforGeeks is the portal for geeks that contain computer science and programming articles. </p> </div></body></html> |
Example of the float property using float value right.
В приведенном ниже примере мы используем значение с плавающей запятой справа. После использования этого значения элемент должен находиться прямо в своем контейнере, как показано на изображении ниже.
float:right
HTML
<!DOCTYPE html><html><head> <title>Float Right</title> <style> img { float:right; /* element must be right on its container */ height: 100px; } div{ width:300px; height: 220px; box-shadow: 0px 2px 2px 2px; } </style></head><body> <div> <h1> float right...</h1> <p>The below picture must be right on its container.</p> <p>The GeeksforGeeks is the portal for geeks that contain computer science and programming articles. </p> </div></body></html> |
float property with an absolutely positioned element.
В приведенном ниже примере мы увидим, что свойство float не будет работать с абсолютно позиционированным элементом.
position:absolute;
HTML
<!DOCTYPE html><html><head> <title>Float</title> <style> img { float:right; /* It won"t work because element is absolutely positioned */ height: 100px; position: absolute; } div{ width:300px; height: 230px; box-shadow: 0px 2px 2px 2px; } </style></head><body> <div> <h1> float with absolutely positioned element.</h1> <p>floating won"t work</p> <p>The GeeksforGeeks is the portal for geeks that contain computer science and programming articles. </p> </div></body></html> |
Свойство CSS float используется перед флексбоксом и сеткой. Сегодня нам нужен веб-сайт, оптимизированный для мобильных устройств. Flexbox более эффективен, чем float.
Вот следующие причины использовать flexbox вместо float.
- Позиционирование дочерних элементов становится проще с flexbox.
- flexbox адаптивен и удобен для мобильных устройств.
- поля гибкого контейнера не схлопываются с полями его содержимого.
- мы можем легко изменить порядок элементов на нашей веб-странице, даже не внося изменений в HTML.
Заключение . В этой статье мы изучили свойство CSS float с доступными значениями и подходящими примерами.