Опытные подскажите пожалуйста

[vladmih]

Народ кто опытный подскажите как вы боритесь с такими вещами в верстке:

1. когда в обвертке два плавающих элемента, то обвертка схлопывается и контент ниже обвертки наезжает на контент который в обвертке,

когда-то задавал похожий вопрос, сказали очистить потолок, добавить в обвертку стиль overflow:hidden;

Какие еще есть варианты?

2. Вот если фиксовый макет, я центрирую блок таким образом margin:0 auto. Но такое не работает на ie 7, как можно еще центрировать блок обвертку всего контента?

[rus]

для ie вроде как text-align: center; для остальных - margin:0 auto;

на счет обертки - те способы что вам перечислили, а больше я к примеру и не знаю.

[lexxcode]

все нормально центрируется в IE7 через margin:0 auto;

http://jsfiddle.net/alexriz/tfaWg/show/

[121990]

а больше я к примеру и не знаю.

Есть еще один способ. Использование позиционирования и отрицательных внешних полосок.

[Николя223]

очистить потолок

Не потолок, а поток.

можете про clear почитать

[vladmih]

очистить потолок

Не потолок, а поток.

можете про clear почитать

Я кстате использую пустой див cо стилем clear:both, когда оверфлоф хиден не подходит.

[red4pony]

Использование позиционирования

Так же можно родителю прописать float:left/right;

Но вырывание элемента из потока для устранения проблемы с таким же элементом - не лучшее решение.

Предпочтительнее (ИМХО) считаются следующие варианты:

1. Добавление класса clearfix(group) для блока который идет после плавающего.
   
2. overflow:hidden для контейнера.
   
3. "Добавление" пустого блока с clear:both; с помощью псевдо- класса/элемента.
   

[lexxcode]

Для очистки потока использую clearfix придуманный нашем гуру товарищем SelenIT'ом. Ну и я его еще пару раз обновлял . Сам автор требует название "bfc-fix" для этого решения, так что правильно его называть именно так. В моем случае clearfix дань моим привычкам.

Этот код просто добавить в самый конец css файла.

/* clearfix */
.bfc-fix{
    -height: 1%;
    *zoom: 1;
    display: table;
}
.bfc-fix:after {
    content: '. . . . . . . . . . .';
    font: .13em/0 sans-serif;
    display: block;
    word-spacing: 99in;
    height: 0;
    overflow: hidden;
}
/* end clearfix */

Применять к элементу который содержит в себе плавающие элементы, так же как и в случае с overflow

<div class="bfc-fix">
  <div class="float">bla-bla-bla</div>
</div>

[red4pony]

Думаю многим было бы интересно узнать принцип работы этого bfc-fix. Не объясните? Или статья может где есть?

Думаю многим было бы интересно узнать принцип работы этого bfc-fix. Не объясните? Или статья может где есть?

1) zoom:1; /* Хак для IE 6 и 7 */ (* для того чтобы IE mac не видели?)

2) display: table, как и overflow: hidden создает свой контекст форматирования, но в отличае от него не обрезает выходящие за его границы абсолютно позиционированные элементы

3) За счет того, что в :after несколько точек и пробел между ними в 99 inches , этот элемент ни в одних реальных условиях не уберется в ширину экрана, браузер всегда будет растягивать таблицу во всю ширину. Ну а то, что высота элемента нулевая и все выходящее за его границы обрезается, не дает отображать точки.

4) overflow создает новый контекст форматирования, благодаря которому указанный элемент изолируется от внешнего контекста, что позволяет решать одну из задач очистки потока - позволять вложенным элементам с float растягивать своего родителя.

Помогли статья 1 и статья 2

Зачем нужны:

- height: 1%: /*для всех браузеров кроме IE?*/

font: .13em/0 sans-serif;

[lexxcode]

Статья раз

Статья два

Зачем нужны:

- height: 1%: /*для всех браузеров кроме IE?*/

font: .13em/0 sans-serif;

- height: 1%; для IE6

font: .13em/0 sans-serif; магия связанная с багами в опере, плюс sans-serif решает проблему если к этому же элементу применяется сторонний или подключенный (@font-face) шрифт.

content: '. . . . . . . . . . .'; Много точек тоже связано с косяком в опере (раньше было только две точки), т.к. word-spacing: 99in; работает нормально во всех браузерах кроме оперы, в опере сколько не ставь больше чем 328px word-spacing не получить

лично я часть:

-height: 1%;
*zoom: 1;

Давно выкинул, ибо ИЕ6-7 не поддерживаю

1) zoom:1; /* Хак для IE 6 и 7 */ (* для того чтобы IE mac не видели?)

Этот хак вроде ниче не прячет, если * перед свойством, то это свойство будет работать только в IE6-7, дефис " - " только IE6

[red4pony]

Спасибо.

content: '. . . . . . . . . . .'; Много точек тоже связано с косяком в опере

Не пробовали на новой Опере (Blink)?

[lexxcode]

Не пробовали на новой Опере (Blink)?

Нет еще, как-то руки не дошли

Но в любом случае этот вариант должен работать. С двумя точками в связи со сменой движка, по идее, должно работать. Но честно я не проверял. Если проверите, то вся наша бесконечная вселенная будет вам бесконечно благодарна

[red4pony]

Оба бага исправлены.

[lexxcode]

word-spacing и font-size, как я понимаю?

[red4pony]

Да. Точнее сказать не исправлены, а не были взяты с собой.

[lexxcode]

Спасибо. Собственно неудивительно т.к. эти бока как раз и были на уровне движка presto

[red4pony]

Здесь Вадим Макеев пишет:

Его значение было установлено в «uses 15 bits to store word-spacing as a fixed-point (2 decimals) integer» (цитирую нашего инженера), т.е. в разумных рамках. В итоге, максимальное значение это 327.67.

Я так понял что максимальное значение 327,67 достигается только на экранах с большим dpi?

Да и почему 327,67? И Вы выбрали 11 точек (10 промежутков)? Наверное связано с разрешением 3280х2048?

Edited May 31, 2013 by red4pony

[lexxcode]

И Вы выбрали 11 точек (10 промежутков)? Наверное связано с разрешением 3280х2048?

в принципе должно хватить и 9 точек и это покроет максимальную ширину дисплея доступную сейчас пользователю, 2560px. Но мы тогда решили сделать немного запаса, на "всякий случай"

Я так понял что максимальное значение 327,67 достигается только на экранах с большим dpi?

не очень понял. при чем тут dpi? Это просто предельное значение которое можно получить в опере, независимо от dpi. На самом деле в других браузерах тоже максимум не 65535, как я писал, после некоторых порогов, порядка 18k px, начинаются всякие глюки, но этого порога достаточно более чем, чтобы не создавать проблем.

[red4pony]

не очень понял. при чем тут dpi?

Я просто посмотрел на запись:

«uses 15 bits to store word-spacing as a fixed-point (2 decimals) integer»

И подумал что мониторы с разными dpi по разному распределяют пикселы по битам.

Думал что при большем dpi на 1 пиксель приходится меньше бит чем при меньшем dpi и за счет этого они (экраны) могут отобразить больше пикселей на 15 бит.