Comments 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 */
для тех кому лень читать)
UFO just landed and posted this here
Да, в общем-то, inline-block чуть менее, чем полностью кроссбраузерен, кроме необходимости хаков к двум не очень популярным браузерам.
Как по мне, лучше сразу заложить возможность работы с любым контентом, чем потом в будущем вставлять теоретические костыли :)
Потомму что как только на странице больше одного флоата, то уже надо присядать, чтобы заставить их вести себя так, как тебе нужно. А людям не хочется изучать все нюансы для того, чтобы сделать банальную трехколоночную верстку ;)
Оказывается, картинка находится внутри абзаца!Вы это серьёзно?
Давно занимаюсь версткой, из своего опыта могу сказать, что как работает флоат я понял только практикуясь с настоящими макетами. Я считаю что объяснить как оно работает, включая все нюансы, практически не возможно, но на «ментальном» уровне я прекрасно понимаю как им пользоваться и в каких ситуациях.
UFO just landed and posted this here
На вскидку могу предложить еще один нюанс, правда он достаточно редкий.
Есть контейнер с overflow: hidden, он достаточно большой, допустим используется на каждой странице сайта для контента, в нем могут находиться флоаты, а могут и не находится, если находятся то он их очищает и все хорошо, если не находятся, то ничего страшного он не делает.
И вот на одной из страниц в этом контейнере вам нужно разместить блок частично или полностью за границами этого блока (отрицательный марджин или абсолютное позиционирование), при этом overflow: hidden не даст вам это сделать по-нормальному.
Есть контейнер с overflow: hidden, он достаточно большой, допустим используется на каждой странице сайта для контента, в нем могут находиться флоаты, а могут и не находится, если находятся то он их очищает и все хорошо, если не находятся, то ничего страшного он не делает.
И вот на одной из страниц в этом контейнере вам нужно разместить блок частично или полностью за границами этого блока (отрицательный марджин или абсолютное позиционирование), при этом overflow: hidden не даст вам это сделать по-нормальному.
UFO just landed and posted this here
На практике overflow: hidden применяется в подавляющем большинстве случаев для очистки флоатов, в примере он был использован именно для этого. С постепенным отмиранием ie6 чистить с помощью overflow: hidden становится проще.
Несмотря на то, что статья для совсем новичков, написано клево, просто и с картинками.
Но в очередной раз напоминает, какая же все-таки хрень HTML+CSS в плане продвинутых layout-ов. Когда ж уже flex-box и grid лэйауты станут мейнстримом.
Но в очередной раз напоминает, какая же все-таки хрень HTML+CSS в плане продвинутых layout-ов. Когда ж уже flex-box и grid лэйауты станут мейнстримом.
Табличная вёрстка Вам в помощь :)
А так же тонна бесполезного html кода.
лучше так даже не шутить)
Нее, таблицы — несемантично и громоздко очень. Плюс у них есть свои загоны, они все равно не решают проблему в полной мере. Тут нужны продвинутые layout-ы.
Довольно часто использую свойство display: inline-block вместо float. По сути то же самое, но избавляет от необходимости использовать clear
Ух ты! Прекрасное применение. Надо взять на вооружение…
В этом варианте есть существенный недостаток: пробелы/переносы строки между блоками не исчезают. Убирать этот единственный пробел отрицательным марджином — костыль, зависящий от шрифта.
Ну и плюс необходимость аккуратно следить за вертикальным выравниванием относительно строки.
Ну и плюс необходимость аккуратно следить за вертикальным выравниванием относительно строки.
UFO just landed and posted this here
Кстати, припоминаю эту статью, видел.
Ну согласитесь, что все без исключения перечисленные там способы костылями таки попахивают :)
Ну согласитесь, что все без исключения перечисленные там способы костылями таки попахивают :)
Еще инлайн блоки позволяют сделать выравнивание justify, например в меню — http://jsfiddle.net/2kRJv/
UFO just landed and posted this here
Ага, только пример накидал правда без фиксов для 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/ — ЧЯДНТ?
UFO just landed and posted this here
Скину коллеге! Задолбали float: left в каждом элементе (без преувеличений!!)…
UFO just landed and posted this 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 just landed and posted this here
так напишите «торт», делов-то
То есть вы считаете, что статья об одном древнем css свойстве это хорошая техническая статья, достойная рейтинга +127?
да, считаю что достойна. т.к. наглядно показывает и пытается объяснить как работает float. лично мне это было интересно, т.к. я иногда вожусь с html.
а так же
1) хабр, это не узко специализированный сайт.
2) топик находится в хабах «Веб-разработка*, Веб-дизайн*, CSS* ». вы можете от них отписаться
3) как уже говорил, напишите свою статью которая получит больший рейтинг, но помните, не факт, что она понравится лично мне, собственно как и другим.
а так же
1) хабр, это не узко специализированный сайт.
2) топик находится в хабах «Веб-разработка*, Веб-дизайн*, CSS* ». вы можете от них отписаться
3) как уже говорил, напишите свою статью которая получит больший рейтинг, но помните, не факт, что она понравится лично мне, собственно как и другим.
Мне интересны хабы «Веб-разработка*, Веб-дизайн*, CSS*», но это — перебор. Если вы не в силах освоить такое простое свойство как float, прекратите «возиться с html». Написать вам статью «Как завязать шнурки»? Вы ведь наверняка «иногда возитесь с ботинками».
И свое негодование направьте в более полезное русло, чем моя карма. В ваших топиках я вообще не нашел ни одной технической статьи.
Отличная статья. Спасибо!
Жаль плюсануть не могу.
Жаль плюсануть не могу.
По поводу float и clear. Мой коллега сделал интересное видео, где картинка (или любой другой блок), которая находится в начале текста, может удивительным образом поместиться в центре текста. — Это что касается тех, кто пользуется CMS.
vimeo.com/41029619
vimeo.com/41029619
Крутой пост, постоянно на него попадаю :)
Sign up to leave a comment.
Подробно о свойстве float