Pull to refresh

Comments 89

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

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

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

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

UFO landed and left these words here
И не хватает подробно про 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 */

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

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

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

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

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

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

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

И свое негодование направьте в более полезное русло, чем моя карма. В ваших топиках я вообще не нашел ни одной технической статьи.
сосни хуйца, школота
До скорых встреч! С нетерпением ждём, новых, ярких, познавательных, сверх-актуальных и незабываемых постов с рейтингом +100500 о том как раскрашивать Друпал и о технике Logitech!
Отличная статья. Спасибо!
Жаль плюсануть не могу.
По поводу float и clear. Мой коллега сделал интересное видео, где картинка (или любой другой блок), которая находится в начале текста, может удивительным образом поместиться в центре текста. — Это что касается тех, кто пользуется CMS.
vimeo.com/41029619
Крутой пост, постоянно на него попадаю :)
согласен
автору спасибо :)
Only those users with full accounts are able to leave comments. Log in, please.