Согласно спецификации CSS, плавающие элементы удаляются из потока документа и не влияют на расположение блоков, а только на расположение встроенных блоков (обычно текстовых). Поэтому, когда его высота превышает содержащий контейнер, общий родительский контейнер не будет автоматически растягиваться, чтобы закрыть плавающий элемент. Но иногда нам нужно такое автоматическое закрытие. Как с этим бороться?
Один из способов сделать это — вставить дополнительную метку в родительский контейнер и указать, что родительский контейнер необходимо расширить. Этот метод хорошо совместим с браузерами и не вызывает проблем. Недостатком является то, что он требует дополнительных (и обычно семантически несемантических) тегов, поэтому лично мне он не нравится.
Позже появился новый способ — использование псевдокласса :after для динамического встраивания элемента для очистки чисел с плавающей запятой. Этот метод имеет тот же принцип, что и предыдущий, за исключением того, что дополнительный контент генерируется с помощью CSS, но IE не учитывает это. поддержка: после и пришлось сделать много хаков. Этот метод имеет общую совместимость, но он может обрабатывать разные браузеры с помощью различных хаков. В то же время он может гарантировать, что HTML относительно чистый, поэтому он по-прежнему используется чаще.
Позже кто-то обнаружил, что установка значения, отличного от видимого, для переполнения родительского контейнера может закрыть плавающий элемент в браузере, совместимом со стандартами. Естественно, IE не поддерживает это, поэтому этот метод так же действителен, как и предыдущий метод. выполняет другую обработку (в частности, запуск макета). Разница в том, что переполнение не так проблематично, как псевдокласс :after. Он также имеет недостатки.
До использования переполнения был другой способ использования float, который заключался в том, чтобы сделать родительский контейнер плавающим. При этом используется преимущество плавающих элементов — плавающие элементы закрывают плавающие элементы. Этот метод дает хорошие результаты в IE/Win и браузерах, совместимых со стандартами, но недостаток также очевиден — родительский контейнер может не плавать только потому, что он хочет плавать. В конце концов, плавание — это особое поведение, а иногда макет не является плавающим. правильно, позволить ему плавать - это тоже нормально. Хотя элементы с плавающей запятой можно закрывать в IE и браузерах, соответствующих стандартам, принцип работы другой. В IE/Win float запускает макет и, следовательно, закрывает float. В браузерах, совместимых со стандартами, float фактически такой же, как и предыдущий. Принцип переполнения в этом методе тот же, что приводит к «диапазону форматирования на уровне блока» - это явление, упомянутое в спецификации CSS. Одной из его характеристик является то, что он автоматически закрывает внутреннее плавающее число. . элемент.
По спецификации следующие типы элементов приводят к области форматирования на уровне блока:
● Плавающие элементы могут быть как левыми, так и правыми.
● Абсолютно позиционированные элементы.
● Элемент встроенного блока, но этот геккон в настоящее время его не поддерживает.
● элементы типа table-cell. Фактически, table, table-head-group, table-row и т. д. также приемлемы, а также inline-table (не поддерживается gecko), поскольку все они косвенно генерируют анонимную таблицу. клетка.
● Переполнение — это элемент, значение которого не отображается.
Поэтому получается, что в браузерах, соответствующих стандартам, у нас тоже может быть столько методов для закрытия плавающего элемента, и нужен только CSS, больше ничего не нужно. Кстати, помимо переполнения, вышеописанное имеет дополнительный эффект автоматического уменьшения ширины родительского контейнера.
Для IE/Win имеется собственная система макета. Элементы с макетом автоматически закрывают плавающие элементы. Давайте посмотрим на свойства CSS, которые запускают макет. Вы обнаружите, что существует много общего с форматированием на уровне блоков. диапазон выше:
● Плавающие элементы ● Абсолютно позиционированные элементы ● display:inline-block
● масштабировать
● ширина/высота
● overflow/overflow-x/overflow-y [новое в IE7]
● максимальная/минимальная ширина/высота [новое в IE7]
Судя по вышесказанному, существует множество способов закрытия плавающих элементов в IE, и естественно все они имеют свои ограничения. Они либо имеют побочные эффекты, либо используют нестандартные атрибуты (которые не могут пройти проверку).
Еще стоит упомянуть display:inline-block. Сам по себе этот атрибут бесполезен для IE. Фактический эффект заключается в простом тайном добавлении макета к элементу. Однако браузеры, соответствующие стандартам, распознают этот атрибут, поэтому он не влияет на них. Для браузера вам необходимо вернуть отображение по умолчанию. Здесь есть ошибка в IE. Если вы сначала определяете display:inline-block, а затем снова устанавливаете отображение в блок (чтобы получить эффект, эти два дисплея должны быть помещены в два оператора CSS один за другим), тогда макет будет не исчезнет, и в то же время макет не исчезнет. Это не повлияет на другие браузеры, поэтому на данный момент это также хороший способ вызвать макет:
| .gainlayout{display:inline-block;} .gainlayout{дисплей:блок;} |
Поэтому существует множество способов закрытия плавающих элементов в браузерах. Как использовать эти свойства CSS вместе, требует детального анализа конкретной ситуации. Также необходимо гибко применять условные комментарии. Если это действительно не работает, можно идти. Назад и использовать ясно. Его можно использовать.