Комментарии 89
Давно уже мог выделить время и разобраться с этим float. Иногда, как мне казалось, он вел себя немного произвольно. Спасибо)
Я, возможно, излишне критичен, но по-моему, здесь все элементарно. Это базовые понятия позиционирования. Киты!
Для 'overflow' в данной ситуации лучше использовать 'hidden', а не 'auto', потому что 'auto' добавит полосу прокрутки для блока выходящего за видимые границы, а 'hidden' отобразит только область внутри элемента, остальное будет скрыто.
Для случая с выравниванием картинок по левому краю с разными размерами картинок:
li {
display: inline-block;
height: 150px;
max-height: 150px;
overflow: hidden;
margin: 2px;
}
получиться что-то подобное:
Для 'overflow' в данной ситуации лучше использовать 'hidden', а не 'auto', потому что 'auto' добавит полосу прокрутки для блока выходящего за видимые границы, а 'hidden' отобразит только область внутри элемента, остальное будет скрыто.
Для случая с выравниванием картинок по левому краю с разными размерами картинок:
li {
display: inline-block;
height: 150px;
max-height: 150px;
overflow: hidden;
margin: 2px;
}
получиться что-то подобное:
Картинка почему-то не отображается. Вот ссылка на изображение:
lh3.googleusercontent.com/-tTLJyq1a8q0/T5fAJ_8kBOI/AAAAAAAAAFw/-SkoDXpS3yA/s500/123.jpg
lh3.googleusercontent.com/-tTLJyq1a8q0/T5fAJ_8kBOI/AAAAAAAAAFw/-SkoDXpS3yA/s500/123.jpg
В вашем повествовании не хватает ссылки на masonry.desandro.com/
Спасибо за перевод статьи, но объясните кто-нибудь, пожалуйста — неужели люди до сих пор не могу выучить, как работает флоат, уже третья статья в этом году только на хабре, хотя это вроде как основы верстки:
Float'омагия: пробуем не «плавать» в спецификации, чтобы не утонуть в потоке
Float'омания: разъяснение как работает css свойство float
По поводу формирования списков с помощью
тоже немного странно. По-моему, решение трехлетней давности с inline-block из блога Мозиллы куда лучше
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 */
для тех кому лень читать)
НЛО прилетело и опубликовало эту надпись здесь
Да, в общем-то, inline-block чуть менее, чем полностью кроссбраузерен, кроме необходимости хаков к двум не очень популярным браузерам.
Как по мне, лучше сразу заложить возможность работы с любым контентом, чем потом в будущем вставлять теоретические костыли :)
Потомму что как только на странице больше одного флоата, то уже надо присядать, чтобы заставить их вести себя так, как тебе нужно. А людям не хочется изучать все нюансы для того, чтобы сделать банальную трехколоночную верстку ;)
Оказывается, картинка находится внутри абзаца!Вы это серьёзно?
Давно занимаюсь версткой, из своего опыта могу сказать, что как работает флоат я понял только практикуясь с настоящими макетами. Я считаю что объяснить как оно работает, включая все нюансы, практически не возможно, но на «ментальном» уровне я прекрасно понимаю как им пользоваться и в каких ситуациях.
НЛО прилетело и опубликовало эту надпись здесь
На вскидку могу предложить еще один нюанс, правда он достаточно редкий.
Есть контейнер с overflow: hidden, он достаточно большой, допустим используется на каждой странице сайта для контента, в нем могут находиться флоаты, а могут и не находится, если находятся то он их очищает и все хорошо, если не находятся, то ничего страшного он не делает.
И вот на одной из страниц в этом контейнере вам нужно разместить блок частично или полностью за границами этого блока (отрицательный марджин или абсолютное позиционирование), при этом overflow: hidden не даст вам это сделать по-нормальному.
Есть контейнер с overflow: hidden, он достаточно большой, допустим используется на каждой странице сайта для контента, в нем могут находиться флоаты, а могут и не находится, если находятся то он их очищает и все хорошо, если не находятся, то ничего страшного он не делает.
И вот на одной из страниц в этом контейнере вам нужно разместить блок частично или полностью за границами этого блока (отрицательный марджин или абсолютное позиционирование), при этом overflow: hidden не даст вам это сделать по-нормальному.
НЛО прилетело и опубликовало эту надпись здесь
На практике overflow: hidden применяется в подавляющем большинстве случаев для очистки флоатов, в примере он был использован именно для этого. С постепенным отмиранием ie6 чистить с помощью overflow: hidden становится проще.
Несмотря на то, что статья для совсем новичков, написано клево, просто и с картинками.
Но в очередной раз напоминает, какая же все-таки хрень HTML+CSS в плане продвинутых layout-ов. Когда ж уже flex-box и grid лэйауты станут мейнстримом.
Но в очередной раз напоминает, какая же все-таки хрень HTML+CSS в плане продвинутых layout-ов. Когда ж уже flex-box и grid лэйауты станут мейнстримом.
Табличная вёрстка Вам в помощь :)
А так же тонна бесполезного html кода.
лучше так даже не шутить)
Нее, таблицы — несемантично и громоздко очень. Плюс у них есть свои загоны, они все равно не решают проблему в полной мере. Тут нужны продвинутые layout-ы.
Довольно часто использую свойство display: inline-block вместо float. По сути то же самое, но избавляет от необходимости использовать clear
Ух ты! Прекрасное применение. Надо взять на вооружение…
В этом варианте есть существенный недостаток: пробелы/переносы строки между блоками не исчезают. Убирать этот единственный пробел отрицательным марджином — костыль, зависящий от шрифта.
Ну и плюс необходимость аккуратно следить за вертикальным выравниванием относительно строки.
Ну и плюс необходимость аккуратно следить за вертикальным выравниванием относительно строки.
НЛО прилетело и опубликовало эту надпись здесь
Кстати, припоминаю эту статью, видел.
Ну согласитесь, что все без исключения перечисленные там способы костылями таки попахивают :)
Ну согласитесь, что все без исключения перечисленные там способы костылями таки попахивают :)
Еще инлайн блоки позволяют сделать выравнивание justify, например в меню — http://jsfiddle.net/2kRJv/
НЛО прилетело и опубликовало эту надпись здесь
Ага, только пример накидал правда без фиксов для IE7 http://jsfiddle.net/alekskorovin/HErtQ/
А вот это любопытно, да
jsfiddle.net/mGvSG/ а чего в статьях не пишут подробно про эту возможность?
Спасибо. Полезный перевод.
PS: Отличные дополнения в комментриях по поводу использования inline-block.
PS: Отличные дополнения в комментриях по поводу использования inline-block.
Немного упражнений для закрепления материала: Почему?
флоат флоатом, а я люблю и часто использую описанную здесь технику (привет Татьянычу)
просто потому что не всегда нужен флоат
просто потому что не всегда нужен флоат
Немножко сумбурно у вас написано — «сделайте так и получите это», без теории и объяснений (например, про серый контейнер плавающих блоков, почему именно он пропадает). Я же учился по классике:
softwaremaniacs.org/blog/2005/12/01/css-layout-float/
softwaremaniacs.org/blog/category/primer/
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) как уже говорил, напишите свою статью которая получит больший рейтинг, но помните, не факт, что она понравится лично мне, собственно как и другим.
а так же
1) хабр, это не узко специализированный сайт.
2) топик находится в хабах «Веб-разработка*, Веб-дизайн*, CSS* ». вы можете от них отписаться
3) как уже говорил, напишите свою статью которая получит больший рейтинг, но помните, не факт, что она понравится лично мне, собственно как и другим.
Мне интересны хабы «Веб-разработка*, Веб-дизайн*, CSS*», но это — перебор. Если вы не в силах освоить такое простое свойство как float, прекратите «возиться с html». Написать вам статью «Как завязать шнурки»? Вы ведь наверняка «иногда возитесь с ботинками».
И свое негодование направьте в более полезное русло, чем моя карма. В ваших топиках я вообще не нашел ни одной технической статьи.
Отличная статья. Спасибо!
Жаль плюсануть не могу.
Жаль плюсануть не могу.
НЛО прилетело и опубликовало эту надпись здесь
Крутой пост, постоянно на него попадаю :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Публикации
Подробно о свойстве float