float — CSS: Каскадные таблицы стилей
CSS-свойство float
помещает элемент в левую или правую сторону его контейнера, позволяя тексту и встроенным элементам обтекать его. Элемент удаляется из обычного потока страницы, но все еще остается частью потока (в отличие от абсолютного позиционирования).
Плавающий элемент — это элемент, в котором вычисленное значение float
не равно none
.
Как float
подразумевает использование блочного макета, он модифицирует вычисляемое значение отображения
значений, в некоторых случаях:
Заданное значение | Расчетное значение |
---|---|
встроенный | блок |
встроенный блок | блок |
встроенный стол | стол |
таблица-строка | блок |
таблица-строка-группа | блок |
таблица-колонка | блок |
таблица-колонка-группа | блок |
таблица-ячейка | блок |
таблица-заголовок | блок |
таблица-заголовок-группа | блок |
таблица-нижний колонтитул | блок |
встроенный гибкий | гибкий |
встроенная сетка | сетка |
прочие | без изменений |
Примечание: Если вы обращаетесь к этому свойству из JavaScript как члену объекта HTMLElement. style
, современные браузеры поддерживают float
, но в старых браузерах вы должны писать его как cssFloat
. Это было исключением из правила, согласно которому имя члена DOM является именем CSS, разделенным тире, в верблюжьем регистре (поскольку «float» — это зарезервированное слово в JavaScript, как видно из необходимости экранировать «класс» как «className» и экранировать «for»
/* Значения ключевых слов */ плыть налево; поплавок: справа; поплавок: нет; поплавок: встроенный старт; поплавок: встроенный конец; /* Глобальные значения */ поплавок: наследовать; поплавок: начальный; поплавок: вернуться; float: обратный слой; поплавок: не установлен;
Свойство float
указывается как одно ключевое слово, выбранное из списка значений ниже.
Значения
-
слева
Элемент должен плавать слева от содержащего его блока.
-
справа
Элемент должен плавать справа от содержащего его блока.
-
нет
Элемент не должен плавать.
-
встроенный пуск
Элемент должен плавать на начальной стороне содержащего его блока. Это левая сторона с
сценариями ltr
и правая сторона ссценариями rtl
.-
рядный конец
Элемент должен располагаться на конце содержащего его блока. Это правая сторона с
сценариями ltr
, а левая сторона ссценариями rtl
.
Исходное значение | нет |
---|---|
Применяется ко всем элементам | , но не действует, если значение display равно none. |
По наследству | нет |
Вычисленное значение | как указано |
Тип анимации | дискретный |
float =
block-start |
конец блока |встроенный старт |
встроенный конец |
защелкивающийся блок |
<привязка-блок()> |
встроенный |
<встроенная привязка()> |
осталось |
справа |
топ |
дно |
нет |
сноска">
=
snap-block( <длина>, [начало | конец | рядом]?)">
=
snap-inline(, [ слева | справа | рядом ]? )
Как позиционируются плавающие элементы
Как упоминалось выше, когда элемент перемещается, он выводится из нормального потока документа (хотя все еще остается его частью) . Он сдвигается влево или вправо, пока не коснется края содержащей его коробки, или другой плавающий элемент .
В этом примере есть три цветных квадрата. Два плавают влево, а один плавает вправо. Обратите внимание, что второй «левый» квадрат размещается справа от первого. Дополнительные квадраты будут продолжать складываться вправо, пока не заполнят содержащее их поле, после чего они будут перенесены на следующую строку.
Элемент с плавающей запятой по крайней мере равен высоте его самого высокого вложенного дочернего элемента с плавающей запятой. Мы задали родительскому элементу ширину: 100%
и сделали его плавающим, чтобы убедиться, что он достаточно высокий, чтобы охватить его плавающие дочерние элементы, и убедиться, что он занимает ширину родительского элемента, поэтому нам не нужно очищать его соседнего брата.
HTML
<раздел> <дел>1дел> <дел>2дел> <дел>3дел> <р> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Тристик Морби sapien acerat tincidunt, sit amet dignissim lectus vulputate. ID Донец якулис велит. Aliquam vel malesuada erat. Present non magna ac massa aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus конге.раздел>
УС
раздел { box-sizing: граница-коробка; граница: 1px сплошной синий; ширина: 100%; плыть налево; } дел { поле: 5px; ширина: 50 пикселей; высота: 150 пикселей; } .левый { плыть налево; фон: розовый; } .верно { поплавок: справа; фон: голубой; }
Результат
Очистка плавающих элементов
Иногда может потребоваться, чтобы элемент переместился ниже любых плавающих элементов. Например, вы можете захотеть, чтобы абзацы оставались смежными с поплавками, а заголовки располагались на отдельной строке. См.
для примера.
Спецификация |
---|
Спецификация каскадного стиля уровня 2 (CSS 2,2). |
Таблицы BCD загружаются только в браузере
с включенным JavaScript. Включите JavaScript для просмотра данных.- Контекст форматирования блока
- Используйте
clear
, чтобы заставить элемент перемещаться ниже плавающего элемента.
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять больше участия?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Определение и значение числа с плавающей запятой — Merriam-Webster
1 из 2
флот
1
: действие или пример плавания а
: приспособление (например, пробка), поддерживающее конец лески с наживкой
б
: плавучая платформа, поставленная на якорь у береговой линии для использования пловцами или лодками
с
: полый шар, плавающий на конце рычага в цистерне, баке или котле и регулирующий уровень жидкости
г
: мешок, содержащий воздух или газ и поддерживающий тело растения или животного
е
: водонепроницаемая конструкция, придающая самолету плавучесть на воде
3
: инструмент или устройство для выравнивания поверхности (например, мокрого бетона)
4
: правительственный грант в виде фиксированного участка земли, еще не обнаруженного путем съемки, за пределами более крупного конкретного участка
5
: транспортное средство с платформой, используемое для перевозки экспоната на параде
также : транспортное средство и экспонат вместе
6
а
: сумма денег, представленная неоплаченными чеками и находящихся в процессе инкассо
б
: время между транзакцией (такой как выписка чека или покупка в кредит) и фактическим изъятием средств для ее покрытия
с
: объем акций общества, доступных для активной торговли на аукционном рынке
7
: безалкогольный напиток с плавающим в нем мороженым
поплавок
2 из 2
непереходный глагол
1
: лежать на поверхности или быть подвешенным в жидкости
2
а
: дрейфовать в жидкости или сквозь нее или как бы в жидкости или сквозь нее
желтые листья спустились вниз
б
: блуждать
3
валюты : найти уровень на международном валютном рынке в ответ на закон спроса и предложения и без какого-либо ограничительного эффекта искусственной поддержки или контроля
переходный глагол
1
а
: плавать в жидкости или на поверхности жидкости
б
: , чтобы заставить плавать, как будто в жидкости
2
: Floid
Плавать Клюквенный болот
3
: . поплавок
4
а
: выставить на приемку
разместить предложение
б
: для размещения (выпуска ценных бумаг) на рынке
с
: для получения денег для создания или развития (предприятия) путем выпуска и продажи ценных бумаг
г
: переговоры
размещение кредита
Синонимы
Существительное
- док
- причал
- посадка
- дамба
- причал
- набережная
- набережная
- пристань
Глагол
- дрейф
- скольжение
- повесить
- наведение
- баланс
- ездить
- парус
- плавать
- waft
Просмотреть все синонимы и антонимы в тезаурусе
Примеры предложений
Существительное Мы строим поплавок для парада возвращения домой. экипаж поставил груз на плавать , прежде чем отправиться обратно по реке Глагол ей было плавает на спине . лед плавающий в реке Будет ли этот материал тонуть или всплывёт на поверхность ? пыль летает по воздуху Входящий прилив в конечном итоге поплавок корабль у рифа. Они сплавили бревна по реке. Она грациозно плыла по сцене. Его голос поплыл в конец комнаты. Узнать больше
Последние примеры в Интернете
В этом году поплавок станет кульминацией годичного празднования 50-летия Сафари-парка, бывшего ранее Парком диких животных. - Сан-Диего Юнион-Трибьюн , 30 декабря 2022 г. Мое любимое событие Фестиваля роз — это Парад звездного света, когда все ждут с нетерпением каждую девятку.0009 float чтобы прибыть. — oregonlive , 15 марта 2022 г. Завод военно-морских самолетов поплавок проходит мимо толпы на параде займов свободы в Филадельфии, 28 сентября 1918 года. — Радхика Чаласани, ABC News , 15 июня 2021 г. Квотербек-чемпион Патрик Махоумс машет рукой вместе с Минни Маус во время парада Суперкубка Канзас-Сити Чифс 9Поплавок 0009 проезжает через Диснейленд в Анахайме, Калифорния, 13 февраля. — People Staff, Peoplemag , 18 февраля 2023 г. Повсюду Дэйв продолжал выделяться тонкой эффектностью, профессорский обыватель средних лет, не боящийся позволить своему прекрасному уму парить . — Моси Ривз, Rolling Stone , 13 февраля 2023 г. Усилия правительства удовлетворить требования МВФ о помощи — позволить рупии плавающие и повышение цен на топливо и тарифы на электроэнергию — будут подпитывать инфляцию и давить на потребителей. — Фаси Манги, Bloomberg.com , 10 февраля 2023 г. Поездка расслабленная и плавная, без намека на плавание или валяние, а более высокие боковины его 20-дюймовой резины добавляют дополнительный комфорт при качении. — Дэн Эдмундс, Автомобиль и водитель , 8 февраля 2023 г. Весь парад float Всадники должны надевать маски, чтобы поддерживать таинственность, окружающую их личности. — Карла Поуп, Good Housekeeping , 24 января 2023 г.
Некоторые хотели знать, почему китайский дирижабль был допущен к проплыл до Атлантического океана, пока его не сбили. — Эллен Накашима, Washington Post , 11 февраля 2023 г. Аварийные бригады прибыли на лодках, чтобы отправить Старков и других жителей его сельского парка мобильных домов в Акампо в безопасное место. — Время , 21 января 2023 г. К 9 часам прибыли аварийные бригады с лодками.0009 float Старкс и другие жители его сельского парка мобильных домов в Акампо в безопасное место. —Майкл Филлис, BostonGlobe.com , 21 января 2023 г. Аварийные бригады прибыли на лодках, чтобы отправить Старков и других жителей его сельского парка мобильных домов в Акампо в безопасное место. —Майкл Филлис, Fortune , 20 января 2023 г. Но когда этот багаж угрожает всплывает на поверхность, семья начинает трещать по швам. — Лорен Пакетт-Поуп, ELLE , 11 января 2023 г. Просто скрин, будучи просеянным, попытался немного сдвинуть его и попытался подбросить к Коулу и просто опрокинул его. — Дэйв Биркетт, Detroit Free Press , 14 ноября 2022 г. Таким образом, травы остаются замороженными в середине и не всплывает наверх, вызывая ожог морозильной камеры. — Рита Надер Хайкенфельд, The Enquirer , 9 сентября 2022 г. Держите ноги вместе и поднимите верхнее колено к бедру, затем опустите обратно. — Good Housekeeping , 15 августа 2022 г. Узнать больше
Эти примеры предложений автоматически выбираются из различных онлайн-источников новостей, чтобы отразить текущее использование слова «плавающий». Мнения, выраженные в примерах, не отражают точку зрения Merriam-Webster или ее редакторов. Отправьте нам отзыв.
История слов
Этимология
Существительное
Среднеанглийский флот лодка, поплавок, от древнеанглийского корабль флота ; сродни древневерхненемецкому flōz raft, stream, древнеанглийскому flēotan to float — больше at Fleet
Первое известное употребление
Существительное
до XII века, в значении, определенном в смысле 1
0 Глагол до XII века, в значении, определяемом в непереходном смысле 1Путешественник во времени
Первое известное использование float было до 12 века
Другие слова того же века
Словарные статьи Рядом с
floatмухоловка
плавать
плавучесть
Посмотреть другие записи поблизости