Управление потоком в CSS: создаём контекст форматирования
Самое главное:
clear
или overflow
. Возможно, вы найдёте полезным для себя использование display:inline-block
или display:table-cell
, способных полностью заменить вам упомянутый overflow
, избавляя вас от опасности указания размеров элемента, а также предоставляя дополнительные возможности.
Статья не содержит универсальных решений, но открывает вашему взору дополнительный инструментарий для управления потоком. Вот полный перевод абзаца о контекстном форматировании блочных элементов (из css спецификации):
Плавающим (float
), абсолютно спозиционированным, отображаемым как табличные ячейки (table-cell
) или заголовки таблиц (table-caption
), строково-блоковым (inline-block
) и элементам со свойствомoverflow
и его значением отличными отvisible
(не считая случаев, когда значение наследуется областью просмотра) устанавливается новый контекст для форматирования
С плавающими и абсолютно спозиционированными элементами, думаю, всё ясно; с 'overflow
' тоже. Сразу добавлю, что эксперименты с заголовками таблиц ни к чему не привели.
Что бы не дублировать, оглашу, что новый код используется везде с изначально написанным следующим стилевым кодом:
#sidebar{
width:30px;
height:200px;
background-color:#ddd;
float:left;
}
#content{
background-color:#dcd;
}
#content
.col{
float:left;
height:50px;
width:30px;
text-align:center;
background-color:#cdd;
}
#content2{
background-color:#ddc;
}
и разметкой:
<div id="sidebar">
side
</div>
<div id="content">
<div class="col">
col1
</div>
<div class="col">
col2
</div>
<div class="col">
col3
</div>
</div>
ff
<div id="content2">
more content
</div>
Данный код вот так отрисовывается в браузерах:
1. display:inline-block
Итак, давайте посмотрим на что способен display:inline-block
Подправим firefox и ie (при наличии hasLayout display:inline
работает как display:inline-block
)
Разберёмся с лишним горизонтальным пространством vertical-align:bottom
добавим *vertical-align:0%
для IE и опустим текст в Опере (vertical-align:text-bottom
).
Вертикальное пространство — баг IE, который появляется при сочетании hasLayout
у одного элемента и float
у другого. Будет даже если вы используете overflow:hidden
, не имеет никакого отношения к display:inline-block
, и если вам критично… — возлагаю поиск решения на ваши плечи, а я пока воспользуюсь *margin-left:-3px
К сожалению не всё так хорошо как кажется: проблема во втором ff, который может совершенно непредсказуемо отображать контент внутри контейнеров с -moz-inline-box
, -moz-inline-stack
и -moz-inline-block
. Хотя в данном случае все колонки со свойством float
отобразились нормально.
2. display:table-cell
Теперь приступим к display:table-cell
Всё здорово, safari тупит — напишем просто table
, а ie совсем не поддерживает table-cell
— тогда сделаем, что бы хотя бы отображалось как во всех браузеров
Что у нас —
а)ширина элемента определяется контентом
б)элемент не пускает другие элементы на свой горизонтальный уровень
Почти тоже самое что и display:inline-block
, только надо добавить перенос строки. Делаем всё это для IE и сразу исправляем известные изъяны.
Этот способ я бы и стал использовать. Тем более что, если после контейнера идёт не текст или строковый элемент, а элемент блоковый — не нужно делать перенос строки в IE, а также стоит отметить, что если известна ширина контейнера, то
1) не нужно использовать в IE display-inline
, потому что вы определяете ширину, а не контент контейнера
2) не нужно делать перенос строки для IE, потому что мы не симулируем display-inline
3) не нужно отдельное свойство для включения hasLayout, потому что width включит его
3. Float
Как я уже писал float также создаёт новый контекст форматирования. Не знаю пригодится ли, но знать мы должны. Итак, как это проявляется? float:left
установленный для .col
вырывает их из потока и их контейнер вроде бы как ничего не содержит и фактически #content не отображается, если ему не задать ширину и высоту. Что бы убедится давайте уберём фон у .col
(а также всю последующую мишуру) :
удаляем background-color
у .col
А теперь посмотрим к чему приведёт overflow:hidden
(в ie включаем hasLayout
)
table
(ie опущу по понятным причинам)
и наконец float:left
(можно и right
).
Так как браузер создаёт отдельный контекст форматирования для данных примеров также как и для абсолютного позиционирования можно предполагать, что для лучшей производительности элементы, которыми манипулирует джава скрипт лучше было бы помещать не только в абсолютно позиционируемые контейнеры, но и в любые из вышеперечисленных.
Используя данные техники вы сможете решить проблемы которые присущи свойствам clear
и overflow
.