Float left что означает: разъяснение как работает css свойство float / Хабр

способы решения — учебник CSS

В процессе верстки с использованием float-элементов вы непременно заметите некоторые странности в их поведении. Мы расскажем о наиболее часто встречающихся проблемах и способах их решения.

Проблема 1. Обтекание влияет на другие элементы

На первом уроке по свойству float мы рассмотрели пример, где футер, расположенный сразу за плавающими блоками, ведет себя странно, прижимаясь верхним краем к низу float-элемента. Это происходит из-за того, что, по сути, футер обтекает боковую панель, но поскольку он занимает 100% ширины, то обтекание выражается лишь прижиманием к нижнему краю, без перемещения по горизонтали.

На примере ниже более явно показано, что происходит с элементом, который должен обтекать соседний элемент, но при этом им не хватает места в одном ряду:

Элемент с классом .b4 пробует обтекать float-элемент .b3, содержащийся в контейнере .wrapper, но поскольку . b4 не влазит в один ряд с .wrapper, он просто прижимается верхней стороной к этому ряду, из-за чего между блоками не остается свободного пространства. Как видите, элементу .b4 дополнительно задано свойство margin-top: 50px

, эффект которого сейчас не заметен. Не зная причины, можно долго ломать голову, почему margin не работает. Однако, если посмотреть на элемент через инспектор кода, можно увидеть, что margin-top всё же работает, просто сейчас он никак не влияет на картину.

Как сделать, чтобы элемент .b4 перестал обтекать соседний? Конечно же, с помощью свойства clear, которое мы уже рассматривали ранее. Повторим еще раз:

.b4 {
	clear: both;
}

Добавив этот код, мы получили такую картину:

Уже лучше, но отступ в 50 пикселей сверху так и не появился. Он всё ещё накладывается на верхний блок:

Такое впечатление, что элементу со свойством margin-top нет от чего отталкиваться. На самом деле, так и есть, потому что если мы проинспектируем элемент .wrapper, то увидим, что его высота странным образом стала равна нулю:

Проблема 2. Нулевая высота контейнера с float-элементами

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

• Если в контейнере содержатся только плавающие элементы, то его высота станет нулевой. Либо, если родителю задано, к примеру, свойство padding-top и/или padding-bottom, то его высота будет равна сумме этих padding-ов.
• Если в родительском контейнере помимо float-элементов имеются также обычные элементы, то высота родителя будет равна высоте этих обычных элементов плюс отступы.

Иными словами, из высоты блока-родителя просто вычитается высота float-элементов.

Как заставить родительский контейнер учитывать высоту содержащихся в нем плавающих элементов? Есть несколько способов решения этой проблемы. Мы расскажем о двух наиболее распространенных и эффективных хаках:

• Micro Clearfix. Этот хак был придуман разработчиком по имени Nicolas Gallagher, и заключается он в добавлении нескольких строк CSS к псевдоэлементу :after родительского контейнера, потерявшего высоту:

  .wrapper:after {
  	content: " ";
  	display: table;
  	clear: both;
  }
  

  Этот код работает во всех современных браузерах. Преимущество данного способа состоит в отсутствии необходимости писать лишний HTML-код.

• Overflow: hidden. Второй вариант решения проблемы с пропавшей высотой контейнера — добавить к этому блоку свойство overflow: hidden. Вообще, данное свойство определяет, будет ли видно содержание блочного элемента, если оно не помещается в него целиком и выходит за пределы области.

  Однако в данном случае оно еще и заставляет учитывать высоту float-элементов.

  .wrapper {
  	overflow: hidden;
  }
  

  У этого метода есть недостаток: если в контейнере находятся абсолютно позиционированные элементы, размещенные за пределами его границ, то они могут исчезнуть из поля зрения. Впрочем, то же самое произойдет с любым содержимым, которое будет вылезать за область контейнера — такова работа значения hidden.

Итак, воспользуемся первым хаком и взглянем на результат:

Как видим, высота блока-родителя стала включать в себя плавающие элементы, а у элемента .b4 теперь нормально отображается верхний отступ в 50 пикселей.

Проблема 3. Перенос блоков при добавлении отступов

После создания колонок с помощью float вы наверняка захотите наполнить их содержимым. В нашем примере есть три колонки одинаковой ширины, которые идеально помещаются в один ряд. Давайте добавим немного контента в каждую из них:

Выглядит неплохо, но нам не хочется, чтобы текст примыкал так сильно к боковым сторонам блоков. Чтобы сделать небольшие промежутки между текстом и внутренними границами блока, мы добавим padding слева и справа (сейчас он добавлен только сверху и снизу в размере 40 пикселей, а для боковых сторон указан 0):

И здесь у нас появляется проблема: одна из колонок съехала вниз. Это случилось из-за того, что ширина каждой колонки стала равна не 33.333333%, а 33.333333% + 10px + 10px. Как вы помните из предыдущего раздела учебника, полная ширина блока — это сумма чисел, в которую включена ширина содержимого, а также размеры боковых отступов, границ и полей.

Чтобы исправить эту проблему, используйте свойство box-sizing со значением

border-box. Тогда браузер будет автоматически включать отступы, поля и рамку в заданную вами ширину блока:

Рекомендуем при создании сетки в CSS заблаговременно прописывать box-sizing, чтобы застраховаться от выпадания блоков при дальнейшей работе с сеткой.

---

Таковы основные проблемы, которые встречаются у float-элементов и могут быть легко решены. Безусловно, существуют и другие трудности, и некоторые из них порой нельзя обойти простым способом. Однако, зная принципы работы float и помня о вышеперечисленных недостатках, вы уже сэкономите много времени и нервов во время верстки.

Далее в учебнике: что такое адаптивный веб-дизайн.

float — CSS — Дока

1. Кратко
2. Пример
3. Как понять
4. Как пишется
5. Подсказки
6. На практике
   1. Лена Райан советует

Кратко

Секция статьи «Кратко»

Свойство помогает «обтекать» блоки текстом.

Пример

Секция статьи «Пример»

.block__img {  float: right;}
          .block__img {
  float: right;
}

Открыть демо в новой вкладке

Как понять

Секция статьи «Как понять»

Иногда при вёрстке блока нужно, чтобы текст рядом с картинкой занимал всё оставшееся место, а после картинки располагался на всю ширину блока. Для таких ситуаций и создан float. Элемент, для которого указано это свойство, частично выходит из потока: все элементы блочного контекста, прописанные в коде после элемента с float, занимают его место, а элементы строчного контекста — «обтекают» его.

Открыть демо в новой вкладке

Как пишется

Секция статьи «Как пишется»

.element {  float: left;}
          .element {
  float: left;
}

В файле стилей пишем селектор элемента, который будем «обтекать», и указываем одно из трёх значений свойства:

• left — элемент встанет у левого края родительского блока.
• right — элемент встанет у правого края родительского блока.
• none — значение по умолчанию, элемент останется в потоке.

Если мы задаём какому-то элементу свойство float и пишем к нему, скажем, абзац текста, а ниже добавляем ещё один абзац, который по задумке должен быть независимым, то второй абзац всё ещё может «обтекать» элемент с float. Поэтому нам нужно прекратить влияние этого свойства, чтобы вернуться к обычному потоку документа. Для этого можно использовать так называемый «clearfix». После элемента, на котором мы хотим прекратить обтекание, можно вставить пустой элемент, обычно с классом

clearfix, и прописать свойство clear:

.clearfix {  clear: both;}
          .clearfix {
  clear: both;
}

Также можно не вставлять отдельный элемент в разметку, а обойтись псевдоэлементом ::after — этот вариант предпочтительнее.

Открыть демо в новой вкладке

Несколько лет назад для похожей цели появилось значение flow-root для свойства display — оно как бы изолирует обтекание. Достаточно применить его к блоку, внутри которого есть элемент с float — и влияние float не будет распространяться вне этого блока. А относительно соседей он будет вести себя как обычный блочный элемент со статичным позиционированием.

Открыть демо в новой вкладке

Также для подобной изоляции можно указать блоку свойство overflow: hidden. Отличие состоит в том, что flow-root позволяет использовать свойство overflow: visible.

Подсказки

Секция статьи «Подсказки»

💡 Применяя float к элементу, мы неявно делаем его блочным.

На практике

Секция статьи «На практике»

Лена Райан советует

Секция статьи «Лена Райан советует»

🛠 float не предназначен для создания сеток или табличной раскладки! Раньше не было другого способа разбить контент на колонки и поставить их рядом друг с другом. Но сейчас для этого есть флексы и гриды, а float используется только для «обтекания».

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

overflow

alt + ←

→

object-fit

alt + →

Объяснение CSS float — Сообщество разработчиков 👩‍💻👨‍💻

Одним из основных и наиболее важных свойств, которые должен изучить каждый веб-дизайнер, является свойство float . Чаще всего он используется для плавающего текста вокруг изображения или для создания макета из двух столбцов . Свойство float может вызвать много разочарований и путаницы, если его не полностью понять, поэтому мы здесь, чтобы развеять эти путаницы с помощью этого краткого объяснения.

Кроме того, обязательно ознакомьтесь с нашими статьями о некоторых других свойствах, помимо CSS float, которые часто вызывают путаницу, например столбцы CSS или относительный размер шрифта.

Определение

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

Свойство float имеет возможные значения:

• Left — элемент перемещается влево от содержащего его блока.
• Right — элемент перемещается справа от содержащего его блока.
• Нет — элемент не должен плавать.

Когда для элемента задано плавание, он смещается вправо или влево до тех пор, пока не коснется края элемента-контейнера или другого плавающего элемента

.

Поддерживать

Лучшее место для проверки того, насколько хорошо поддерживается свойство CSS, — это служба Can I Use. Здесь мы видим, что свойство float имеет чрезвычайно высокую поддержку: превышает 97% .

Примеры

Теперь мы подкрепим теорию с плавающей запятой примерами, чтобы все было понятно. Примеры покажут вам, как размещать текст вокруг div.

HTML

 

  

  

  
Кардиган эстетическая прямая продажа, migas locavore Shoreditch права на велосипед своими руками lyft уличное искусство биттеры. Гастропаб шалфей флекситариан нового уровня холодного отжима из исландии вильямсбургский тофу биодизель каждый день носите с собой.  Прямая торговля селфи микстейп 8-битные джинсовые шорты палео. Гастропаб Thundercats на крыше, Jianbing Williamsburg microdosing tbh Ловец снов распятие. Распятие с усами на пальцах, китчевые селфи в tumblr, повседневная эстетика. Готовый кардиган Narwhal облагораживает.

 

CSS

 .контейнер {
  граница: сплошная тонкая #ccc;
}
.левый сегмент {
  высота: 200 пикселей;
  ширина: 200 пикселей;
  цвет фона: #C98EED;
  плыть налево;
}
.правый сегмент {
  высота: 200 пикселей;
  ширина: 200 пикселей;
  цвет фона: #8FC9FF;
  поплавок: справа;
}
 

В этом примере мы видим, что два элемента div перемещаются вправо и влево от контейнера . Текст обтекает элементы div и продолжается под ним .

После этого мы можем придать элементам стиль, а тексту — форматирование.

HTML

 

  

  

  
Кардиган эстетическая прямая продажа, migas locavore Shoreditch права на велосипед своими руками lyft уличное искусство биттеры.  Гастропаб шалфей флекситариан нового уровня холодного отжима из исландии вильямсбургский тофу биодизель каждый день носите с собой. Прямая торговля селфи микстейп 8-битные джинсовые шорты палео. Гастропаб Thundercats на крыше, Jianbing Williamsburg microdosing tbh Ловец снов распятие. Распятие с усами на пальцах, китчевые селфи в tumblr, повседневная эстетика. Готовый кардиган Narwhal облагораживает.

 

CSS

 .контейнер {
  граница: сплошная тонкая #ccc;
}
.левый сегмент {
  Высота: 200 пикселей;
  Ширина: 200 пикселей;
  Поле-справа: 10px;
  Цвет фона: #A1ED8E;
  Плыть налево;
}
 

Во втором примере показано, как два элемента div перемещаются к левой стороне контейнера с помощью свойства float:left и как текст обтекает эти элементы div и продолжается под ними.

Надеюсь, эта статья будет полезна при работе с float свойство.

Спасибо за прочтение!

Вам нужна помощь с CSS и веб-дизайном? Отправьте нам сообщение, и команда Kolosek найдет его!

Этот пост изначально опубликован в блоге Kolosek.

html — Плавающий слева против плавающего справа — почему меняется порядок?

HTML :

 
Джексон Гонсалес
 

CSS:

 изображение {
    высота: 100 пикселей;
    ширина: 100 пикселей;
    радиус границы: 50%;
    плыть налево;
}
.автор-текст {
    размер шрифта: 22px;
    плыть налево;
}
 

Если у меня осталось число с плавающей запятой, порядок имеет смысл для меня… потому что сначала изображение, а затем текст. Но когда я меняю float слева направо… сначала появляется текст, затем изображение?.. почему меняется порядок?…

Слева: https://codepen.io/psj01/pen/YrgKLy Справа: https://codepen.io/psj01/pen/KXEPoQ

• html
• css

Если они оба оставлены, сначала изображение смещается влево, а затем текст смещается влево, как вы сказали. Это то же самое для правого. Изображение смещается полностью вправо, а затем текст смещается вправо, фактически натыкаясь на изображение.

Сначала первый предмет толкается в соответствующем направлении, затем следует второй предмет. Вы в основном просто меняете направление, когда меняете поплавок вправо. Они перемещаются индивидуально в направлении поплавка в том порядке, в котором они расположены в CSS, но не проходят друг друга.

Из-за расположения содержимого в HTML-файле CSS поместит первый элемент списка в самую дальнюю указанную точку. Если вы хотите, чтобы оба элемента были справа, но изображение было первым (помещенным слева от текста), вы можете попробовать один из двух вариантов. Во-первых, просто поместите тег p перед тегом изображения в своем HTML-коде, например:

 
Джексон Гонсалес

 

Или вы можете поместить оба элемента внутрь тега div, сохранив для них одни и те же свойства float left, но затем переместив весь контейнер div вправо. Вот так:

HTML-файл

  bp.blogspot.com/-lUl0ztniLKk/Vhhjg7WWPJI/AAAAAAAAAAJI/PgYEmoSNKRU/s400/Author.gif" alt="Фото автора">
  
Джексон Гонсалес
<дел>
 

Файл CSS

 раздел {
  поплавок: справа;
}
картинка {
    высота: 100 пикселей;
    ширина: 100 пикселей;
    радиус границы: 50%;
    плыть налево;
}
.автор-текст {
    размер шрифта: 22px;
    плыть налево;
}
 

Я попробовал оба этих варианта в вашей ссылке на ручку кода. Поэкспериментируйте с использованием div в качестве контейнера для позиционирования объектов. Надеюсь это поможет!

float: right просто меняет порядок по горизонтали по сравнению с float: left , аналогично языку, который пишется справа налево. Первый элемент выравнивается по правому краю, следующий следует в порядке справа налево и так далее.

Последовательность 1 возникла из-за того, что элемент img сначала отображался и удерживал крайнее левое положение перед текстом;

Последовательность 2 возникла по той же причине: элемент img сначала отрисовывался и занимал крайнюю правую позицию перед текстом.