Как стать автором
Обновить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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