@grokru20 апр 2012 в 13:09

Подробно о свойстве float

4 мин

224K

CSS * Веб-разработка *

Перевод

+127

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

@Talyutin 20 апр 2012 в 13:30

Давно уже мог выделить время и разобраться с этим float. Иногда, как мне казалось, он вел себя немного произвольно. Спасибо)

@frentsel 25 апр 2012 в 09:16

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

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

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

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

@frentsel 25 апр 2012 в 09:22

Картинка почему-то не отображается. Вот ссылка на изображение:

lh3.googleusercontent.com/-tTLJyq1a8q0/T5fAJ_8kBOI/AAAAAAAAAFw/-SkoDXpS3yA/s500/123.jpg

НЛО прилетело и опубликовало эту надпись здесь

@Dzen_Marketing 20 апр 2012 в 13:30

В вашем повествовании не хватает ссылки на masonry.desandro.com/

@skorney 20 апр 2012 в 13:33

И не хватает подробно про overflow с точки зрения float

@Supercharged 20 апр 2012 в 13:39

Статья все-таки слишком базовая для таких вещей как Masonry, который, тем более, уже и не CSS.

@skorney 20 апр 2012 в 13:43

в masonry там же при помощи position:absolute сетка строится?

@Dzen_Marketing 20 апр 2012 в 17:41

Да, но я очень много видел людей, которые пытаются добиться подобного эффекта через float

@bolk 21 апр 2012 в 15:04

Повествование Джошуа Джонсона.

@derSmoll 20 апр 2012 в 13:37

Спасибо за перевод статьи, но объясните кто-нибудь, пожалуйста — неужели люди до сих пор не могу выучить, как работает флоат, уже третья статья в этом году только на хабре, хотя это вроде как основы верстки:
Float'омагия: пробуем не «плавать» в спецификации, чтобы не утонуть в потоке
Float'омания: разъяснение как работает css свойство float

По поводу формирования списков с помощью

li {
  display: inline;
}

тоже немного странно. По-моему, решение трехлетней давности с inline-block из блога Мозиллы куда лучше

@skorney 20 апр 2012 в 13:40

.ib {display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; _overflow:hidden;}/* inline-block emulation */

для тех кому лень читать)

@derSmoll 20 апр 2012 в 13:46

да, оно :)

НЛО прилетело и опубликовало эту надпись здесь

@skorney 20 апр 2012 в 14:09

Скорее всего overflow написан чтобы работало на IE6 без доктайпа
А вообще с вами согласен, я сейчас обычно пишу просто display:inline-block; а потом уже смотрю в браузерах как работает :)

НЛО прилетело и опубликовало эту надпись здесь

@VasilioRuzanni 20 апр 2012 в 14:01

Да, в общем-то, inline-block чуть менее, чем полностью кроссбраузерен, кроме необходимости хаков к двум не очень популярным браузерам.

НЛО прилетело и опубликовало эту надпись здесь

@derSmoll 20 апр 2012 в 14:04

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

НЛО прилетело и опубликовало эту надпись здесь

@derSmoll 20 апр 2012 в 17:00

ТЗ и спеки — наше всё :)

Что касается меня, то я стараюсь следовать заветам Седерхольма и делать верстку максимально booletproof :)

НЛО прилетело и опубликовало эту надпись здесь

@dmitriid 20 апр 2012 в 15:22

Потомму что как только на странице больше одного флоата, то уже надо присядать, чтобы заставить их вести себя так, как тебе нужно. А людям не хочется изучать все нюансы для того, чтобы сделать банальную трехколоночную верстку ;)

@putnik 20 апр 2012 в 13:43

Оказывается, картинка находится внутри абзаца!

Вы это серьёзно?

НЛО прилетело и опубликовало эту надпись здесь

@conturov 20 апр 2012 в 13:59

Наверное это он образно сказал.

@Maxxon 20 апр 2012 в 13:54

Давно занимаюсь версткой, из своего опыта могу сказать, что как работает флоат я понял только практикуясь с настоящими макетами. Я считаю что объяснить как оно работает, включая все нюансы, практически не возможно, но на «ментальном» уровне я прекрасно понимаю как им пользоваться и в каких ситуациях.

НЛО прилетело и опубликовало эту надпись здесь

@Maxxon 20 апр 2012 в 14:05

На вскидку могу предложить еще один нюанс, правда он достаточно редкий.

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

И вот на одной из страниц в этом контейнере вам нужно разместить блок частично или полностью за границами этого блока (отрицательный марджин или абсолютное позиционирование), при этом overflow: hidden не даст вам это сделать по-нормальному.

НЛО прилетело и опубликовало эту надпись здесь

@Maxxon 20 апр 2012 в 14:14

На практике overflow: hidden применяется в подавляющем большинстве случаев для очистки флоатов, в примере он был использован именно для этого. С постепенным отмиранием ie6 чистить с помощью overflow: hidden становится проще.

@skorney 20 апр 2012 в 14:17

да, но в статье написано overflow: auto вместо hidden, и вроде работает

НЛО прилетело и опубликовало эту надпись здесь

@Maxxon 20 апр 2012 в 14:25

хм… никогда не юзал overflow: auto даже не знаю почему, но сейчас покопался в интернете и увидел что советуют использовать overflow: hidden, т.к. overflow: auto может вызвать ненужное появление скролбаров при определенном стечении обстоятельств.

НЛО прилетело и опубликовало эту надпись здесь

@Maxxon 20 апр 2012 в 14:29

Это уже совсем редкий случай, с таким не сталкивался. При position: absolute всегда указываю position: relative у блока относительно которого абсолютно позиционирую. При указании баг пропадает.

НЛО прилетело и опубликовало эту надпись здесь

@alekskorovin 20 апр 2012 в 21:38

но не стоит забывать о неприятной связке overflow: hidden и position: relative в итоге режущей по ширине/высоте даже дочерние элементы с position: absolute;

НЛО прилетело и опубликовало эту надпись здесь

@VasilioRuzanni 20 апр 2012 в 13:58

Несмотря на то, что статья для совсем новичков, написано клево, просто и с картинками.
Но в очередной раз напоминает, какая же все-таки хрень HTML+CSS в плане продвинутых layout-ов. Когда ж уже flex-box и grid лэйауты станут мейнстримом.

@RUgaleFF 20 апр 2012 в 14:13

Табличная вёрстка Вам в помощь :)

@Maxxon 20 апр 2012 в 14:14

А так же тонна бесполезного html кода.

@coocheenin 20 апр 2012 в 14:18

А вот — не обязательно. Таблицы, например, удобнее всего верстать таблицами :)

@skorney 20 апр 2012 в 14:19

лучше так даже не шутить)

@VasilioRuzanni 20 апр 2012 в 14:25

Нее, таблицы — несемантично и громоздко очень. Плюс у них есть свои загоны, они все равно не решают проблему в полной мере. Тут нужны продвинутые layout-ы.

@VasilioRuzanni 20 апр 2012 в 14:26

P.S. Если речь не о табличных данных. Больше всего умиляет, когда кто-то, освоив div-ную верстку, бросается верстать дивами, собственно, таблицы.

@skorney 20 апр 2012 в 14:29

У меня когда-то на конторе сказали «забудь тег table». Наверное тут люди тоже буквально восприняли)

@Supercharged 20 апр 2012 в 14:41

Либо все div-ы висят на position: absolute. Ну чем не div-ная верстка?

НЛО прилетело и опубликовало эту надпись здесь

@dasty 20 апр 2012 в 14:00

Довольно часто использую свойство display: inline-block вместо float. По сути то же самое, но избавляет от необходимости использовать clear

@coocheenin 20 апр 2012 в 14:19

Ух ты! Прекрасное применение. Надо взять на вооружение…

@dom1n1k 20 апр 2012 в 14:39

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

НЛО прилетело и опубликовало эту надпись здесь

@dom1n1k 20 апр 2012 в 14:50

Кстати, припоминаю эту статью, видел.
Ну согласитесь, что все без исключения перечисленные там способы костылями таки попахивают :)

@alekskorovin 20 апр 2012 в 20:43

Еще инлайн блоки позволяют сделать выравнивание justify, например в меню — http://jsfiddle.net/2kRJv/

НЛО прилетело и опубликовало эту надпись здесь

@alekskorovin 20 апр 2012 в 21:06

Ага, только пример накидал правда без фиксов для IE7 http://jsfiddle.net/alekskorovin/HErtQ/

НЛО прилетело и опубликовало эту надпись здесь

@dom1n1k 20 апр 2012 в 22:28

А вот это любопытно, да

@skorney 20 апр 2012 в 14:03

jsfiddle.net/mGvSG/ а чего в статьях не пишут подробно про эту возможность?

НЛО прилетело и опубликовало эту надпись здесь

@coocheenin 20 апр 2012 в 14:22

Спасибо. Полезный перевод.

PS: Отличные дополнения в комментриях по поводу использования inline-block.

@Stdit 20 апр 2012 в 14:48

Немного упражнений для закрепления материала: Почему?

НЛО прилетело и опубликовало эту надпись здесь

@Mikke 20 апр 2012 в 15:45

флоат флоатом, а я люблю и часто использую описанную здесь технику (привет Татьянычу)
просто потому что не всегда нужен флоат

@dshster 20 апр 2012 в 16:36

Немножко сумбурно у вас написано — «сделайте так и получите это», без теории и объяснений (например, про серый контейнер плавающих блоков, почему именно он пропадает). Я же учился по классике:
softwaremaniacs.org/blog/2005/12/01/css-layout-float/
softwaremaniacs.org/blog/category/primer/

@Grundiss 20 апр 2012 в 17:09

Плавающие элементы не могут выходить за край своего контейнера-родителя.

jsfiddle.net/tPDmA/1/ — ЧЯДНТ?

НЛО прилетело и опубликовало эту надпись здесь

@AnGr 20 апр 2012 в 17:19

Скину коллеге! Задолбали float: left в каждом элементе (без преувеличений!!)…

НЛО прилетело и опубликовало эту надпись здесь

@alekskorovin 21 апр 2012 в 15:23

да для IE7-IE8 приходится использовать ul li + li чтобы добраться к примеру для 2-го элемента, как здесь — http://jsfiddle.net/thirtydot/LvvNL/1/, этакая неполноценная эмуляция nth-child. Неплохо здесь рассмотрена — http://dimox.name/nth-child-pseudo-selector-emulation-in-ie7-and-ie8/

@Anonym 21 апр 2012 в 09:59

Я в шоке. Хабр уже не просто «не торт», даже не печенька. То мы конденсатор перепаиваем, то float изучаем. Скоро появятся статьи как завязывать шнурки.

НЛО прилетело и опубликовало эту надпись здесь

@olegi 23 апр 2012 в 06:50

так напишите «торт», делов-то

@Anonym 23 апр 2012 в 06:54

То есть вы считаете, что статья об одном древнем css свойстве это хорошая техническая статья, достойная рейтинга +127?

@olegi 23 апр 2012 в 07:01

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

а так же
1) хабр, это не узко специализированный сайт.
2) топик находится в хабах «Веб-разработка*, Веб-дизайн*, CSS* ». вы можете от них отписаться
3) как уже говорил, напишите свою статью которая получит больший рейтинг, но помните, не факт, что она понравится лично мне, собственно как и другим.

@Anonym 23 апр 2012 в 07:04

Мне интересны хабы «Веб-разработка*, Веб-дизайн*, CSS*», но это — перебор. Если вы не в силах освоить такое простое свойство как float, прекратите «возиться с html». Написать вам статью «Как завязать шнурки»? Вы ведь наверняка «иногда возитесь с ботинками».

@olegi 23 апр 2012 в 07:09

вообще-то не вам решать, что нормально, а что перебор.

@Anonym 23 апр 2012 в 07:07

И свое негодование направьте в более полезное русло, чем моя карма. В ваших топиках я вообще не нашел ни одной технической статьи.

@olegi 23 апр 2012 в 07:09

сосни хуйца, школота

@Anonym 23 апр 2012 в 07:40

До свидания.

@olegi 23 апр 2012 в 07:44

До скорых встреч! С нетерпением ждём, новых, ярких, познавательных, сверх-актуальных и незабываемых постов с рейтингом +100500 о том как раскрашивать Друпал и о технике Logitech!