Пользователь
0,0
рейтинг
20 апреля 2012 в 17:09

Разработка → Подробно о свойстве float перевод

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



Что такое float?


Некоторые элементы в CSS являются блочными и поэтому начинаются с новой строки. Например, если расположить два абзаца с тегами P, то они будут находиться друг под другом. Другие же элементы являются «строчными», т.е. отображаются на странице в одну строку.

Один из способов переназначить элементам тип обтекания — это использование свойства float. Классический пример — использование float для выравнивания картинки по левому или правому краю. Вот простой HTML-код картинки и абзаца:

<img src="http://lorempixum.com/200/200/" />
<p>Lorem ipsum...</p>

Они отображаются с новой строки:



Добавляем немного CSS картинке:
img {
  float: right;
  margin: 20px;
}


Получается выравнивание по правому краю:



Если текста больше, то абзац будет обтекать картинку:



Допустим, нам нужно сделать отступ в 20 пикселей между картинкой и текстом. Вот такая конструкция работать не будет:
p {margin: 20px;}


Правильно вот так:
img {margin: 20px;}




Почему же не работает отступ для абзаца? Чтобы разобраться, добавим рамку:

p {
  border: solid 1px black;
}


Результат может вас удивить:



Оказывается, картинка находится внутри абзаца! Поэтому и не работает свойство margin в первом случае. Чтобы исправить это, можно применить float:left к абзацу и указываем абсолютную ширину:

img {
  float: right;
  margin: 20px;
}
 
p {
  float: left;
  width: 220px;
  margin: 20px;
}




Странные правила float



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

<ul>
  <li><img src="1450823466601083332032"/></li>
  <li><img src="http://placehold.it/100x150&text=2"/></li>
  <li><img src="1450823466394721548724"/></li>
  <li><img src="1450823466376067888878"/></li>
  <li><img src="1450823466279266032276"/></li>
  <li><img src="http://placehold.it/100x150&text=6"/></li>
  <li><img src="http://placehold.it/100x100&text=7"/></li>
</ul>


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

li {
  float: left;
  margin: 4px;
}




Но что, если изображения разной высоты?



Если мы добавим элементам списка отображение в одну строку, получится немного симпатичнее:

li {
  display: inline;
}




А теперь выравниваем по вертикали:

img {	
  vertical-align: top;
}




Следует помнить, что в случае большей высоты картинок, остальные изображения обтекают только одно предыдущее, например:



Пример изменения очередности элементов — например, у нас есть список элементов по порядку:
<ul>
  <li><img src="1450823466601083332032"/></li>
  <li><img src="http://placehold.it/100x100&text=2"/></li>
  <li><img src="1450823466394721548724"/></li>
  <li><img src="1450823466376067888878"/></li>
  <li><img src="1450823466279266032276"/></li>
  <li><img src="http://placehold.it/100x100&text=6"/></li>
</ul>


Если мы хотим расположить их в обратном порядке, просто применяем float:right вместо float:left, и не придется менять порядок в HTML:



С помощью float удобно группировать элементы на странице, но большой проблемой становится то, что последующие элементы (текст или блок) также получают свойство обтекания. Например, у нас есть блок картинок:



Текст под ним начинает обтекать весь блок:



Чтобы избежать этого, необходимо использовать свойство clear. Если применим его ко второму изображению:

ul li:nth-child(2) {	
  clear: left;
}


Получим вот, что:



В этом случае остальные изображения продолжают наследовать float:left. Соответсвенно текст будет отображаться коряво:



Нужно применить clear:both к абзацу:

p {
  clear: both;
}


Наша проблема решена:



Теперь предположим, что нам необходимо установить фон для галереи из предыдущих примеров. Если бы элементы были не плавающими, то получилось бы вот, что:

ul {
  background: gray;
}




Но если элементам списка применить float:left, фон совсем пропадает:



Если мы сначала устанавливаем высоту для UL:

ul {
  height: 300px;
}




Это тоже не решает проблему, т.к. размеры фона заданы абсолютно. Нам поможет класс clearfix, который будет применен к div на том же уровне, что и элементы UL.

.clearfix {
  clear: both;
}


Существует еще одно решение, с использованием overflow:

ul {
  overflow: auto;
}




Девять правил float-элементов:



  1. Плавающие элементы не могут выходить за край своего контейнера-родителя.
  2. Каждый плавающий элемент будет отображаться справа или ниже от предыдущего при float:left, либо слева и ниже, при float:right.
  3. Блок с float:left не может быть правее, чем блок с float:right.
  4. Плавающий элемент не может выходить за пределы верхней границы своего контейнера.
  5. Плавающий элемент не может располагаться выше, чем родительский блок или предыдущий плавающий элемент.
  6. Плавающий элемент не может располагаться выше, чем предыдущая строка inline-элементов
  7. Плавающий блок должен быть расположен как можно выше.
  8. Один плавающий элемент, следующий за другим, не может выходить за пределы своего контейнера — происходит перенос на следующую строку.
  9. Блок с float:left должен быть расположен как можно левее, а с float:right — как можно правее.
Перевод: Joshua Johnson
@grokru
карма
407,0
рейтинг 0,0

Похожие публикации

Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (89)

  • +1
    Давно уже мог выделить время и разобраться с этим float. Иногда, как мне казалось, он вел себя немного произвольно. Спасибо)
    • 0
      Я, возможно, излишне критичен, но по-моему, здесь все элементарно. Это базовые понятия позиционирования. Киты!
      Для 'overflow' в данной ситуации лучше использовать 'hidden', а не 'auto', потому что 'auto' добавит полосу прокрутки для блока выходящего за видимые границы, а 'hidden' отобразит только область внутри элемента, остальное будет скрыто.

      Для случая с выравниванием картинок по левому краю с разными размерами картинок:

      li {
      display: inline-block;
      height: 150px;
      max-height: 150px;
      overflow: hidden;
      margin: 2px;
      }

      получиться что-то подобное:

  • 0
    В вашем повествовании не хватает ссылки на masonry.desandro.com/
    • +5
      И не хватает подробно про overflow с точки зрения float
    • +1
      Статья все-таки слишком базовая для таких вещей как Masonry, который, тем более, уже и не CSS.
      • +1
        в masonry там же при помощи position:absolute сетка строится?
        • 0
          Да, но я очень много видел людей, которые пытаются добиться подобного эффекта через float
    • 0
      Повествование Джошуа Джонсона.
  • +11
    Спасибо за перевод статьи, но объясните кто-нибудь, пожалуйста — неужели люди до сих пор не могу выучить, как работает флоат, уже третья статья в этом году только на хабре, хотя это вроде как основы верстки:
    Float'омагия: пробуем не «плавать» в спецификации, чтобы не утонуть в потоке
    Float'омания: разъяснение как работает css свойство float

    По поводу формирования списков с помощью
    li {
      display: inline;
    }
    

    тоже немного странно. По-моему, решение трехлетней давности с inline-block из блога Мозиллы куда лучше
    • +5
      .ib {display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; _overflow:hidden;}/* inline-block emulation */
      

      для тех кому лень читать)
      • 0
        да, оно :)
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Скорее всего overflow написан чтобы работало на IE6 без доктайпа
          А вообще с вами согласен, я сейчас обычно пишу просто display:inline-block; а потом уже смотрю в браузерах как работает :)
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Да, в общем-то, inline-block чуть менее, чем полностью кроссбраузерен, кроме необходимости хаков к двум не очень популярным браузерам.
        • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Как по мне, лучше сразу заложить возможность работы с любым контентом, чем потом в будущем вставлять теоретические костыли :)
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            ТЗ и спеки — наше всё :)

            Что касается меня, то я стараюсь следовать заветам Седерхольма и делать верстку максимально booletproof :)
            • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Потомму что как только на странице больше одного флоата, то уже надо присядать, чтобы заставить их вести себя так, как тебе нужно. А людям не хочется изучать все нюансы для того, чтобы сделать банальную трехколоночную верстку ;)
  • –1
    Оказывается, картинка находится внутри абзаца!
    Вы это серьёзно?
    • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Наверное это он образно сказал.
  • +1
    Давно занимаюсь версткой, из своего опыта могу сказать, что как работает флоат я понял только практикуясь с настоящими макетами. Я считаю что объяснить как оно работает, включая все нюансы, практически не возможно, но на «ментальном» уровне я прекрасно понимаю как им пользоваться и в каких ситуациях.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        На вскидку могу предложить еще один нюанс, правда он достаточно редкий.

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

        И вот на одной из страниц в этом контейнере вам нужно разместить блок частично или полностью за границами этого блока (отрицательный марджин или абсолютное позиционирование), при этом overflow: hidden не даст вам это сделать по-нормальному.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            На практике overflow: hidden применяется в подавляющем большинстве случаев для очистки флоатов, в примере он был использован именно для этого. С постепенным отмиранием ie6 чистить с помощью overflow: hidden становится проще.
            • 0
              да, но в статье написано overflow: auto вместо hidden, и вроде работает
              • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                хм… никогда не юзал overflow: auto даже не знаю почему, но сейчас покопался в интернете и увидел что советуют использовать overflow: hidden, т.к. overflow: auto может вызвать ненужное появление скролбаров при определенном стечении обстоятельств.
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Это уже совсем редкий случай, с таким не сталкивался. При position: absolute всегда указываю position: relative у блока относительно которого абсолютно позиционирую. При указании баг пропадает.
                • НЛО прилетело и опубликовало эту надпись здесь
                  • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              но не стоит забывать о неприятной связке overflow: hidden и position: relative в итоге режущей по ширине/высоте даже дочерние элементы с position: absolute;
              • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    Несмотря на то, что статья для совсем новичков, написано клево, просто и с картинками.
    Но в очередной раз напоминает, какая же все-таки хрень HTML+CSS в плане продвинутых layout-ов. Когда ж уже flex-box и grid лэйауты станут мейнстримом.
    • –1
      Табличная вёрстка Вам в помощь :)
      • –1
        А так же тонна бесполезного html кода.
        • +2
          А вот — не обязательно. Таблицы, например, удобнее всего верстать таблицами :)
      • +2
        лучше так даже не шутить)
      • 0
        Нее, таблицы — несемантично и громоздко очень. Плюс у них есть свои загоны, они все равно не решают проблему в полной мере. Тут нужны продвинутые layout-ы.
        • +2
          P.S. Если речь не о табличных данных. Больше всего умиляет, когда кто-то, освоив div-ную верстку, бросается верстать дивами, собственно, таблицы.
          • +2
            У меня когда-то на конторе сказали «забудь тег table». Наверное тут люди тоже буквально восприняли)
          • 0
            Либо все div-ы висят на position: absolute. Ну чем не div-ная верстка?
        • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Довольно часто использую свойство display: inline-block вместо float. По сути то же самое, но избавляет от необходимости использовать clear
    • 0
      Ух ты! Прекрасное применение. Надо взять на вооружение…
    • +1
      В этом варианте есть существенный недостаток: пробелы/переносы строки между блоками не исчезают. Убирать этот единственный пробел отрицательным марджином — костыль, зависящий от шрифта.
      Ну и плюс необходимость аккуратно следить за вертикальным выравниванием относительно строки.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Кстати, припоминаю эту статью, видел.
          Ну согласитесь, что все без исключения перечисленные там способы костылями таки попахивают :)
          • +1
            Еще инлайн блоки позволяют сделать выравнивание justify, например в меню — http://jsfiddle.net/2kRJv/
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Ага, только пример накидал правда без фиксов для IE7 http://jsfiddle.net/alekskorovin/HErtQ/
                • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              А вот это любопытно, да
  • +1
    jsfiddle.net/mGvSG/ а чего в статьях не пишут подробно про эту возможность?
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Спасибо. Полезный перевод.

    PS: Отличные дополнения в комментриях по поводу использования inline-block.
  • 0
    Немного упражнений для закрепления материала: Почему?
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    флоат флоатом, а я люблю и часто использую описанную здесь технику (привет Татьянычу)
    просто потому что не всегда нужен флоат
  • +1
    Немножко сумбурно у вас написано — «сделайте так и получите это», без теории и объяснений (например, про серый контейнер плавающих блоков, почему именно он пропадает). Я же учился по классике:
    softwaremaniacs.org/blog/2005/12/01/css-layout-float/
    softwaremaniacs.org/blog/category/primer/
  • –1
    Плавающие элементы не могут выходить за край своего контейнера-родителя.

    jsfiddle.net/tPDmA/1/ — ЧЯДНТ?
    • НЛО прилетело и опубликовало эту надпись здесь
  • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Скину коллеге! Задолбали float: left в каждом элементе (без преувеличений!!)…
  • НЛО прилетело и опубликовало эту надпись здесь
  • –1
    Я в шоке. Хабр уже не просто «не торт», даже не печенька. То мы конденсатор перепаиваем, то float изучаем. Скоро появятся статьи как завязывать шнурки.
    • НЛО прилетело и опубликовало эту надпись здесь
    • –1
      так напишите «торт», делов-то
      • –1
        То есть вы считаете, что статья об одном древнем css свойстве это хорошая техническая статья, достойная рейтинга +127?
        • 0
          да, считаю что достойна. т.к. наглядно показывает и пытается объяснить как работает float. лично мне это было интересно, т.к. я иногда вожусь с html.

          а так же
          1) хабр, это не узко специализированный сайт.
          2) топик находится в хабах «Веб-разработка*, Веб-дизайн*, CSS* ». вы можете от них отписаться
          3) как уже говорил, напишите свою статью которая получит больший рейтинг, но помните, не факт, что она понравится лично мне, собственно как и другим.
          • –1
            Мне интересны хабы «Веб-разработка*, Веб-дизайн*, CSS*», но это — перебор. Если вы не в силах освоить такое простое свойство как float, прекратите «возиться с html». Написать вам статью «Как завязать шнурки»? Вы ведь наверняка «иногда возитесь с ботинками».
            • 0
              вообще-то не вам решать, что нормально, а что перебор.

          • 0
            И свое негодование направьте в более полезное русло, чем моя карма. В ваших топиках я вообще не нашел ни одной технической статьи.
            • –1
              сосни хуйца, школота
              • –1
                До свидания.
                • 0
                  До скорых встреч! С нетерпением ждём, новых, ярких, познавательных, сверх-актуальных и незабываемых постов с рейтингом +100500 о том как раскрашивать Друпал и о технике Logitech!
  • –1
    Отличная статья. Спасибо!
    Жаль плюсануть не могу.
  • +1
    По поводу float и clear. Мой коллега сделал интересное видео, где картинка (или любой другой блок), которая находится в начале текста, может удивительным образом поместиться в центре текста. — Это что касается тех, кто пользуется CMS.
    vimeo.com/41029619
  • 0
  • 0
    Крутой пост, постоянно на него попадаю :)
    • 0
      согласен
      автору спасибо :)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.