Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 100
Не являюсь супер верстальщиком т.к. мою душу больше греет чисто php, но пожалуйста расскажите разницу между и блок clear: both, заранее спасибо.
съел редактор тег br с clear=«all»
У тега
таки есть свойство clear с допустимыми значениями all | left | right | none
таки есть свойство clear с допустимыми значениями all | left | right | none
съел тег <br />
так он deprecated eще в html 4.01, не говоря уже о html5
Если вы про <br>, то в html5 он вполне себе здравствует. Читайте спецификации.
В контексте топика, большой разницы нету.
Т.е. и то и то вернет поток вывода в нормальное русло.
Т.е. и то и то вернет поток вывода в нормальное русло.
Поток-то вернёт, но добавится высота блока <BR>, которая не обнуляется стилями в Хроме из-за бага. И deprecated — не последний аргумент.
Ссылку на пример с overflow:auto пофиксите, смотрит на второй, с clear:both
ну раз это такая статейка для начинающих, можно еще заметить, что overflow:hidden не кроссбраузерно: для ie нужно искать другие способы (лично я выношу в отдельный файл для ие zoom:1. это свойство считается невалидным, но именно в отдельном файле все ок)
Честно говоря, верстая сложные дизайны — поддерживать валидность CSS чрезвычайно сложно. Очень многое будет убегать в разного рода IE7-8-9-Opera файлы, и работать потом с этим будет страшно неудобно. Лично я давно отказался от CSS валидности, ибо она приносит только гемморой, в отличии от HTML валидности, которая позволяет держать себя в тонусе.
Ещё не совсем понятно, а чем плох overflow:hidden в пункте кроссбраузерность? Если судить по этой заметке, то всё вполне сносно. Лично я доселе применял zoom:1 только в двух ситуациях:
1. непонятные глюки с render-ом страницы в IE7, IE8 (например всё прыгает и моргает, глюки с :hover)
2. в IE7 вместе со свойством display:inline, для имитации display: inline-block;
Ещё не совсем понятно, а чем плох overflow:hidden в пункте кроссбраузерность? Если судить по этой заметке, то всё вполне сносно. Лично я доселе применял zoom:1 только в двух ситуациях:
1. непонятные глюки с render-ом страницы в IE7, IE8 (например всё прыгает и моргает, глюки с :hover)
2. в IE7 вместе со свойством display:inline, для имитации display: inline-block;
не все имеют возможность отказаться от валидности, так как все-таки пока основным условием валидности является хотя бы от ie7. Не говоря уже о том, что у многих заказчиков на работе в целях безопасности или еще по каким-то соображениям стоит ie6.
overflow:hidden ведет себя несколько по-другому в ie 6 и 7. он обрезает содержимое, а не пресчитывает высоту.
ну и zoom:1 для ie6 и 7 во многих случаях можно использовать. А вот в 8-ке можно и вовсе без хаков обойтись обычно :)
overflow:hidden ведет себя несколько по-другому в ie 6 и 7. он обрезает содержимое, а не пресчитывает высоту.
ну и zoom:1 для ie6 и 7 во многих случаях можно использовать. А вот в 8-ке можно и вовсе без хаков обойтись обычно :)
Бедолаги, ни border-radius-а, ни opacity, ни zoom.
да нет, в принципе все ок) да и к тому же, верстальщику самому должно быть приятно от своей работы, когда везде все опрятно, не едет, не обрезается и т.п.
Не вижу связи между «везде все опрятно, не едет, не обрезается и т.п.» и добровольными кандалами.
да какие кандалы, что вы) все замечательно. и про зум — вы невнимательно прочитали мои комменты.
Попробую проще, что общего между [ «верстальщику приятно», «везде все опрятно, не едет, не обрезается» ] и [ «выношу в отдельный файл для ие», «валидность для галочки» ]? Что в этом удобного и замечательного? Ещё хотелось бы отметить, что всякие IE-комментарии и отдельные файлы легко можно заменить 1 классом для <body> или <html>. А скруглённые уголки понадобятся будете 6-12 блоков добавлять? Или border-radius вынесете в «отдельный файл». Это тоже будет замечательно? :)
да нет. представьте, можно и без 6-12 блоков обойтись)
Сути дела это не меняет :) Но всё же, а как? Интересует именно css2-метод.
меняет) необязательно городить тонны кода для хорошей верстки. даже наоборот. но и старые браузеры по мере возможности поддерживать можно. есть для этого способы.
Мой опыт с вами не согласен. И всё же, где метод? :)
ахаха. универсальный для всего?) класс! как найдете такой, напиши обязательно, поделитесь опытом
o_O. Полагаю, что вы потеряли нить беседы. Вы сказали, что знаете как сверстать скруглённые уголки используя <6 блоков, да так, чтобы было валидно (CSS2.1?). Учитывая, что далее вы написали, что «городить тонны кода» не есть хорошо, я сделал вывод что вы уверены в своих словах.
На данный момент мне кажется, что вы спорите ради спора. К примеру, вы так и не привели никаких аргументов, которые бы оправдали иконку CSS-валидности.
На данный момент мне кажется, что вы спорите ради спора. К примеру, вы так и не привели никаких аргументов, которые бы оправдали иконку CSS-валидности.
это бесполезный диалог просто уже) никакого одного универсального метода не существует. в каком-то макете лучше использовать картинки для декора, в каком-то ксс3+какой-нибудь pie в ие (все в разумных пределах). на эту тему написано очень много, не вижу смысла рассуждать далее. и, прошу, не надо мне навязывать никаких «икон css-валидности».
дело в том что опрятно и т.д. в ИЕ6 просто не рулит. Ошибки в ИЕ6 иногда возникают… мягко говоря из неоткуда. Применил свойство какой-то к элементу, и из-за него где-то что то поплыло(даже не рядом а именно где-то)
Ну и пока мы, разработчики не откажемся от ИЕ6 он будет жить. А вообще нужно сказать иди ты на… ИЕ6 лес дремучий. Мне не так хорошо платят что бы я с тобой имел… :)
Ну и пока мы, разработчики не откажемся от ИЕ6 он будет жить. А вообще нужно сказать иди ты на… ИЕ6 лес дремучий. Мне не так хорошо платят что бы я с тобой имел… :)
ie6 в целях безопасности… nom-nom…
В самых крайних случаях когда нужно железно решить проблему без последствий — можно обернуть float-ные блоки в таблицу с width:100%. Всегда работает и не имеет тех проблем что имеют
clear:both (выпадание под clear лишних блоков), overflow:hidden (обрезание области для всего что пытается выйти наружу — например для position:absolute элементов)
Что блок с флотнутыми элементами внутри не схлопывался можно написать следующий код (кроссбраузерный)
1% отработает нормально, т.к. ие растягивает блоки в зависимости от контента даже если установлена конкретная высота, но только при условии если у родителя не будет заданна фиксированная высота.
Вместо overflow:hidden, что бы не обрезало элементы на абсолютах, можно воспользоватся хаком :after
.container {
overflow:hidden; /* для нормальных браузеров */
height:1%; /* для IE */
}
1% отработает нормально, т.к. ие растягивает блоки в зависимости от контента даже если установлена конкретная высота, но только при условии если у родителя не будет заданна фиксированная высота.
Вместо overflow:hidden, что бы не обрезало элементы на абсолютах, можно воспользоватся хаком :after
.container {
height:1%; /* для IE */
}
.container:after { /* для нормальных браузеров */
content:"";
display:block;
clear:both;
}
Отличная статья, спасибо. Но у меня есть вопрос как раз по этой теме. Недавно правил верстку одного сайта и нашел проблему с плавающим блоком и списками, которые его обтекают. Вот пример кода:
Список обтекает плавающий блок, но круглые отметки каждого элемента налазят на плавающий блок, а не обтекают его. У меня это выглядит так:
Вопрос: в чем может быть проблема? Может быть вы уже такое видели?
<div style="float:left; width:500px;">Плавающий блок
вторая строка
третья строка</div><ul><li>первый элемент</li><li>второй элемент</li><li>третий элемент</li></ul>Список обтекает плавающий блок, но круглые отметки каждого элемента налазят на плавающий блок, а не обтекают его. У меня это выглядит так:
Вопрос: в чем может быть проблема? Может быть вы уже такое видели?
Так и должно быть. Просто верстку делал ничего не понимающий в CSS человек (студент наверно). Поставьте margin-left: 500px на UL чтобы исправить ситуацию.
Если поставить маргин обтекание будет не совсем верным. А если список по высоте больше, чем флоэт блок? Тогда он продолжится ниже, только будет на 500 px правее, а слева будет куча пустого места. Это не решение вопроса. Например попробуйте ваш вариант, только с ul списком больше 3-х:
P.S. Можете объяснить почему так и должно быть? Я не понимаю, почему текст обтекает, а этот флажек нет. Поидее ведь плавающий блок все должно обтекать, а не только текст списка.
<div style="float:left; width:500px;">Плавающий блок
вторая строка</br>
третья строка
</div><ul style="margin-left:500px;"><li>первый элемент</li><li>второй элемент</li><li>третий элемент</li><li>третий элемент</li><li>третий элемент</li><li>третий элемент</li><li>третий элемент</li></ul>
P.S. Можете объяснить почему так и должно быть? Я не понимаю, почему текст обтекает, а этот флажек нет. Поидее ведь плавающий блок все должно обтекать, а не только текст списка.
overflow:hidden для UL
и, скорее всего, padding-left:20px, иначе буллиты могут исчезнуть.
Ниже: habrahabr.ru/blogs/css/136588/#comment_4544449 решение получше, мне кажется.
С list-style-position:inside будет обтекание буллита текстом для многострочных элементов списка. Если вам это подходит, то почему бы и нет. Ну и буллиты могут прилипнуть к float блоку.
Решение будет работать на данном несколько самобытном чёрно-белом примере. Но для сохранения правильного и строгого поведения в потоке нужен прежде всего overflow:hidden. Это сделает элемент «правильным».
А list style pos: inside — это как бы графический обман, мы просто притягиваем буллеты к тексту. Так как идентичность буллетов во всех браузер пиксель-в-пиксель невозможно добиться стандартными средствами поэтому часто уходят все эти list-style/list-type, убиваются отступы, ставятся новые padding-left для li и им добавляется рисованный буллет в виде background.
Решение по ссылке — не лучше.
А list style pos: inside — это как бы графический обман, мы просто притягиваем буллеты к тексту. Так как идентичность буллетов во всех браузер пиксель-в-пиксель невозможно добиться стандартными средствами поэтому часто уходят все эти list-style/list-type, убиваются отступы, ставятся новые padding-left для li и им добавляется рисованный буллет в виде background.
Решение по ссылке — не лучше.
Объясняю. Потому что флоат влияет только на горизонтальные границы inline boxes, проще говоря на отдельные строки из букв и элементы с display:inline-block. А блочные элементы флоат не расталкивает. Поставьте, например, background: yellow на ul (или бордер) и увидите, о чем я говорю. Видимо буллиты здесь браузер видит как чаcть блочного бокса и рисует их в нормальном виде, а текст внутри li флоатом сдвигается вправо.
Поставьте списку css-свойство list-style-position:inside. Это частично решит проблему. При желании можно добиться отображения как в outside, но там для кроссбраузерности нужен бубен.
минимум попробуйте добавить overflow:hidden для UL, а так хорошо бы было увидеть ссылку на пример
Я верстальщик, знаю, как работает float, но, черт возьми, читая эту статью, не понял, как оно работает :).
Например,
Что значит «выравнивается»? Текст в нем тоже выравнивается? Может, скорее, прижимается?
Вот здесь есть подробная и очень понятная статья Ивана Сагалаева по раскладке колонок на флоатах — softwaremaniacs.org/blog/2005/12/01/css-layout-float/
Все простым языком и не оставит вопросов. Очень рекомендую.
Например,
Элемент выравнивается по левому (left) или правому краю (right);
Что значит «выравнивается»? Текст в нем тоже выравнивается? Может, скорее, прижимается?
Вот здесь есть подробная и очень понятная статья Ивана Сагалаева по раскладке колонок на флоатах — softwaremaniacs.org/blog/2005/12/01/css-layout-float/
Все простым языком и не оставит вопросов. Очень рекомендую.
А какой тогда синоним слова «выравнивается» вы считаете более понятным? Мне кажется, фраза «выравнивается по левому краю» вполне проста и ясна.
Мне нравится ваш термин, на мой взгляд он действительно звучит проще.
Иван Сагалаев проделал большую работу, спасибо за ссылку на него, я думаю она пригодится читателям, которым нужны будут подробности.
Иван Сагалаев проделал большую работу, спасибо за ссылку на него, я думаю она пригодится читателям, которым нужны будут подробности.
КЛАСС! Ждём статьи:
— Чем padding отличается от margin?
— Как объединить несколько ячеек в таблице в одну?
— UL/OL списки, магия или реальность?
— Чем padding отличается от margin?
— Как объединить несколько ячеек в таблице в одну?
— UL/OL списки, магия или реальность?
Мой друг, посмотрите на количество людей, добавивших эту статью в избранное. Это говорит о том, что материал актуален. И я полагаю, что статья про padding и margin так же нашла бы своего читателя.
Про: «Вложенные дивы это просто!» забыли:)
А главное такие мануалы можно будет собрать в книжку — CSS за 24 часа.
А главное такие мануалы можно будет собрать в книжку — CSS за 24 часа.
зря смеетесь, про схлопывание маргинов начинающие верстальщики даже не догадываются ;)
Еще можно сделать clear при помощи :after
.element:after {
clear:both;
content:"";
display:block;
}
.element:after {
clear:both;
content:"";
display:block;
}
Всем, кто жаждит основополагающих знаний по верстке, рекомендую прочитать еще и вот эти несколько статей.
А как же банальнейший баг с удвоением маргина с той стороны, в которую плавает блок, в ие 7?
Вместо /> можно еще пользоваться Micro-Clearfix Hack, который не засоряет разметку лишними элементами, и безотказно работает во всех браузерах.
я чего-то не понял… 2012-й год же… я бы понял если бы этот пост написали ну так… лет 5 назад :) ну может 4… в общем Привет кэп!
Когда шесть с половиной лет назад я написал свою первую статью про вёрстку, первый комментарий был "все это мы конечно проходили года два назад, но новичкам будет полезно почитать..."
Вам это кажется очевидным, только потому что вы начинали 5 лет назад. Но новички в индустрии появляются постоянно, поэтому элементарные статьи по любой технологии актуальны до тех пор, пока актуальная сама технология.
P.S. Хотя сейчас я бы уже float для раскладки блоков во многих местах заменял на более удобный inline-block. Но «old habits die hard».
Вам это кажется очевидным, только потому что вы начинали 5 лет назад. Но новички в индустрии появляются постоянно, поэтому элементарные статьи по любой технологии актуальны до тех пор, пока актуальная сама технология.
P.S. Хотя сейчас я бы уже float для раскладки блоков во многих местах заменял на более удобный inline-block. Но «old habits die hard».
Тут нельзя не согласиться. По поводу новичков. Просто само свойство float — плавает, плавающее, и т.д. вроде как должно быть понятно. + есть спецефикации и т.д. с другой стороны я сталкиваюсь с тем же в Django сейчас. ДЛя кого-то что-то очевидно, а для меня ужас как не ясно.
Вы правы в чем-то…
по поводу inline-block он же зараза не везде уместен :) А вообще конечно лучше его использовать!
Вы правы в чем-то…
по поводу inline-block он же зараза не везде уместен :) А вообще конечно лучше его использовать!
Автор, статья отличная. Я тоже не профессиональный верстальщик но приходится верстать время от времени. Эта проблема на самом деле доставляет много проблем у неопытных. Если бы только нашёлся такой человек который раньше бы мог рассказать об этом всём..) Сколько бы времени и нервов было бы сохранено) Все шаги из твоей статьи были испытаны на своей шкуре. Спасибо за статью.
PS: если сайт dotnetways.com/ ваш то я бы советовал на сайдбаре «Свежие .NET Ways» поменять левый margin у списка, пикселей так на 10, а то что-то очень уж некрасиво он вылазит влево =))
PS: если сайт dotnetways.com/ ваш то я бы советовал на сайдбаре «Свежие .NET Ways» поменять левый margin у списка, пикселей так на 10, а то что-то очень уж некрасиво он вылазит влево =))
Элементарные вещи, но очень хороший стиль изложения. Для совсем новичков самое оно. Не останавливайтесь и пишите еще, люди вас будут читать с удовольствием. Например, я это все знаю и использую уже лет 5, но объяснить незнающим так, чтобы это было интересно и сходу понятно — не могу.
Элемент отображается как блочный, так словно ему установлено свойство display: block;
А разве не inline-block?
Если автору не сложно, в следующих постах разобрать position и overflow, и побольше примеров. Заранее благодарен!
[experience]
Eсли есть float элементы, то родителю надо ставить overflow:visible для правильного расчёта размеров с учётом float элементов.
[/experience]
Eсли есть float элементы, то родителю надо ставить overflow:visible для правильного расчёта размеров с учётом float элементов.
[/experience]
Сколько воды.
Float для блочной верстки.
p.s. в преддверии смерти IE, не поддерживающих css свойство display: inline-block, «float» остается актуальным.
Float для блочной верстки.
CSS:
.block { width: 100px; height: 100px; background: #abc; }
.fl { float: left; }
.fr { float: right; }
.cl { clear: both; width: 0; height: 0; }
HTML:
<div class="block fl">Блок будет располагаться с левой стороны</div>
<div class="block fr">Блок будет располагаться с правой стороны</div>
<div class="cl"> // очищаем обтекание, чтобы блоки не налезали на контент, идущий далее.</div>
p.s. в преддверии смерти IE, не поддерживающих css свойство display: inline-block, «float» остается актуальным.
Спасибо за шпаргалку.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Float'омания: разъяснение как работает css свойство float