Как правильно, стандартный способ обработки CSS-плавающих

Question

Я всегда думал, что для обработки CSS-плавающих верных способов было бы использовать либо чистый div: after псевдо-класс, либо overflow: auto на родительском объекте. Как я понимаю, ясно, что - это , предназначенный для очистки поплавков и расширения родительского элемента до нормального. Это его цель, да?

Сегодня я обнаружил, что слышал об альтернативном методе обработки float (и коллапса родителя): также плавающего родителя для расширения его вокруг плавающего потомка.

Как это согласуется с веб-стандартами? Есть ли даже официальный стандарт float / clear?

Answer 1

Все эти методы взломаны - поплавки никогда не были предназначены для тех типов макетов, для которых мы их используем. Они были предназначены для контроля потока текста вокруг таких вещей, как изображения. В результате, как говорит Эдеверетт, не существует единого утвержденного способа приблизиться к нему - использовать то, что работает в ваших обстоятельствах!

Лично я предпочитаю переполнение: скрытый метод из-за его простоты. У меня никогда не было проблем с этим.

Принесите css3 и несколько столбцов!

http://www.css3.info/preview/multi-column-layout/

Answer 2

Здесь нет особого стандарта . Используйте все, что работает в ситуации.

Добавление дополнительных элементов HTML только для того, чтобы очистить поплавок, вызывает недовольство, но иногда может оказаться полезным.

Лично мне нравится предпочитать использовать стиль Float Nearly Everything для плавания родительского элемента, но он подходит не для всех ситуаций.

Answer 3

Как сказал @edeverett, особого стандарта не существует.

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

Начинающие склонныперемещать все содержимое, а затем искать, где находится фон родительского элемента, хотя при отсутствии содержимого в потоке родительский элемент больше не может иметь видимого фона ...
У меня были трудные времена с IE6 и последним столбцом(слишком большой для всего дизайна), идущий под остальными (из-за того, что ошибка с плавающей запятой удвоена или ширина равна 100% + отступ / отступ для дочернего элемента)

Затем вы изучите много разных техник, каждая из которых имеет свою силуи ограничения и проблемы.

Тогда вы научитесь на опыте , когда использовать каждый из них.Даже абсолютное позиционирование в редких случаях;даже раскладку таблиц в безвыходных случаях.Они плохие, но макет с 25 делителями, ожидающими взрыва, как только вы добавляете 1px куда-то, хуже.
Практическое правило: чем меньше вы удаляете контент из потока, тем меньше у вас проблем .И всегда есть много способов сделать то же самое в CSS.

Мой личный фаворит - универсальный display: inline-block;
Теперь, когда Fx 3.x заменил Fx 2.0 (3.0 - этодаже исчезает), он поддерживается каждым браузером (display: inline; + zoom: 1; + условный комментарий для IE <8). <br>Две незначительные неприятности, о которых я могу думать:

• Пробелу нужен трюккак </div><!-- comment --><div> между двумя последовательными div, чтобы избежать этого * часто требуется 1028 *
• vertical-align: top;, и его трудно обнаружить, когда вы начинаете его использовать

В формах с меткой +ввод на строку, это делает чудеса, по сравнению с поплавками.То же самое в верхних и нижних колонтитулах.

Answer 4

Когда я впервые изучил CSS, я использовал метод плавающий родитель-потомок (забавная история, я фактически использовал только float + width (теперь, когда я прочитал, что это не так смешно)), но теперь я чувствую, что он просто грязный.Я имею в виду, где ты остановился?Вы просто пропали из всего этого?

Это бы сработало, конечно, но я обнаружил, что более элегантное решение - это применять поплавки там, где это необходимо (для выравнивания элементов хорошо и правильно) и очищать их соответствующим образом.,Черт возьми, в эти дни я даже добавляю немного позиции: абсолютной и позиции: относительно микса.

Очистка сделана с целью удаления чисел с плавающей запятой, и я не уверен, что это полезно после этого.

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