Причина написания этой статьи в том, что команда в настоящее время находится в стадии нехватки кадров, и в последнее время стали помогать с операцией телефонных интервью. Я многое повидал и многое приобрел, самое большое из которых — моя бдительность. Хотя я брал интервью у других, я также обнаружил, что, хотя я знал или понимал большую часть содержания, связанного с процессом коммуникации, было нелегко описать его систематически или ясно, поэтому я начал разбираться с некоторыми, казалось бы, знающими некоторые «запутанными». знание.
[Эта статья в основном основана на справочных материалах и некоторых моих собственных представлениях, справочные материалы перечислены в конце текста. 】
Float — это классическое свойство в CSS-верстке, и те, кто использовал float, наверняка столкнутся с ситуациями, когда им нужно очистить или закрыть float. Мое понимание очистки или закрытия заключается в том, что это зависит от того, как вы это реализуете.
Проще говоря, использование свойства clear для реализации можно рассматривать как очистку float, а метод, который заставляет элемент генерировать свойство BFC или hasLayout имеет значение true, можно назвать заключающим float.
Механизмы позиционирования в CSS можно разделить на:
- Нормальный поток (обычно известный как поток документов, но стандартом является нормальный поток, поэтому разумно называть его нормальным потоком).
- Плавающий: Цитата из статьи сестры заключается в следующем.Следует отметить, что плавающий блок будет плавать до содержащего блока или другого плавающего блока, а плавающий элемент отделен от нормального потока, и это повлияет только на нормальный поток Макет встроенного элемента не влияет на элементы блочного уровня, как если бы плавающий элемент не существовал. В то же время может возникнуть ситуация «высокого коллапса» (это также основной сценарий для клиринга и закрытия плавающих требований).
Плавающий блок можно перемещать влево и вправо до тех пор, пока его внешние края не сойдутся.Содержащий блок или край другого плавающего блока. Плавающие блоки не относятся к обычному потоку в документе.Не влияет на макет коробок уровня блока, но только расположение встроенных коробок (обычно текста), нормальный поток в документе будет вести себя так, как будто плавающее поле не существует. Когда высота плавающего поля превышает содержащее поле, содержащее поле не будет автоматически растягиваться, чтобы закрыть плавающий элемент (феномен «схлопывания высоты»). .
- Абсолютное позиционирование: это не тема этой статьи, поэтому я не буду говорить больше. Проще говоря, абсолютно позиционированный элемент выходит за рамки обычного потока и позиционируется относительно родительского элемента, чье ближайшее свойство отображения не является статическим.
закрытый поплавок
Суть закрытого плавания заключается в том, чтобы заставить элемент генерировать BFC или свойство hasLayout, чтобы оно было истинным.
BFCМетод создания (ссылка изBlock formatting context MDN), и жирные смелые являются общими или требуют внимания:
- the root element or something that contains it
- floats (elements where float is not none)
- absolutely positioned elements (elements where position is absolute or fixed)
- inline-blocks (elements with display: inline-block)
- table cells (elements with display: table-cell, which is the default for HTML table cells)
- table captions (elements with display: table-caption, which is the default for HTML table captions)
- anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for HTML tables, table rows, table bodies, table headers and table footers, respectively), or inline-table
- block elements where overflow has a value other than visible
- display: flow-root
- elements with contain: layout, content, or strict
- flex items (direct children of the element with display: flex or inline-flex)
- grid items (direct children of the element with display: grid or inline-grid)
- multicol containers (elements where column-count or column-width is not auto, including elements with column-count: 1)
- column-span: all should always create a new formatting context, even when the column-span: all element isn't contained by a multicol container (Spec change, Chrome bug).
дляhasLayoutСвойства, след статьи:
Механизм отображения IE6-7 использует внутреннюю концепцию, называемую компоновкой.Поскольку сам механизм отображения имеет много дефектов, это напрямую приводит к множеству ошибок отображения в IE6-7. Когда мы говорим, что элемент «получает макет» или что элемент «имеет макет», мы имеем в виду его собственное свойство Microsoft hasLayout http://msdn.microsoft.com/worksh ... rties/haslayout .asp установите значение true для этой цели. IE6-7 использует концепцию компоновки для управления размером и расположением элементов Те элементы, которые имеют компоновку, отвечают за размер и расположение самих себя и своих дочерних элементов. Если hasLayout элемента имеет значение false, то его размер и положение контролируются ближайшим предком, которому принадлежит макет.
Проще говоря, это концепция размещения элементов управления, уникальная для старой версии IE.Обработка совместимости с IEКогда вам нужно обратить внимание на этот атрибут, с точки зрения производительности вы можете считать hasLayout равным BFC.
Условия, которые запускают hasLayout:
- position: absolute
- float: left|right
- display: inline-block
- Ширина: любое значение, кроме «авто».
- height: любое значение, кроме "auto" (например, многие используют height: 1% для закрытых поплавков)
- масштабирование: любое значение, кроме «нормального» (MSDN) http://msdn.microsoft.com/worksh ... properties/zoom.asp
- writing-mode: tb-rl (MSDN) http://msdn.microsoft.com/worksh ... ies/writingmode.asp
В IE7 переполнение также становится триггером макета:
- overflow: hidden|scroll|auto (Это свойство не запускало макет в предыдущих версиях IE.)
- overflow-x|-y: hidden|scroll|auto (свойства в блочной модели CSS3, еще не широко поддерживаемые браузерами. Они также не запускали функции макета в предыдущих версиях IE)
На самом деле так много условий срабатывания, что вам нужно помнить: самое безобидное и используемое всеми для борьбы со старой версией IE закрытая плавающая совместимостьzoom.
BFC
Почему запуск BFC может привести к эффекту закрытого плавания, из определения BFC:
A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.
Проще говоря, одним из наиболее важных эффектов BFC является изоляция элементов внутри BFC от элементов снаружи, так что расположение внутренних и внешних элементов не влияет друг на друга.
Кроме того, основные характеристики БТЭ можно запомнить следующим образом:
- Внутренние коробки будут располагаться друг за другом в вертикальном направлении, то есть внутри БТЭ нормальный поток;
- BFC в том же элементе взаимодействия может произойти коллапс маржи; [Предотвратить проблему коллапса верхнего и нижнего края】
- Левая сторона поля поля каждого элемента касается левой стороны поля границы блока-контейнера (в противном случае для форматирования слева направо). даже если есть поплавок; BFC — это изолированный и независимый контейнер на странице, дочерние элементы внутри контейнера не будут влиять на внешние элементы, и наоборот;
- При расчете высоты БТЭ учитывайте все элементы, содержащиеся в БТЭ, и даже плавающие элементы участвуют в расчете; [Решите «Проблему падения высоты»】
- Область плавающего блока не накладывается на BFC; [Четкое плавание текста, предотвращение эффекта переноса текста】
очистить поплавок
Чтобы очистить поплавок, атрибут clear используется в сочетании со значением атрибута Both. Это можно сделать с помощью дополнительного элемента в конце содержащего блока или с помощью настройки псевдоэлемента, очистив оба. Лучший способ лично порекомендовать — использовать псевдоклассы, а затем сотрудничать с методом, совместимым с hasLayout IE, лучшее решение в статье сестры:
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}
Кроме того, в конце статьи в ветке упоминается метод из статьи Николаса Галлахера:
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}
Дело здесь в роли псевдоэлемента before.Эффект заключается в том, что поля внутреннего элемента и поля внешнего элемента над ним накладываются друг на друга. Насколько я понимаю, эффект очистки поплавка проявляется только в конце элемента через метод очистки: оба для очистки поплавка, тем самым устраняя проблемы коллапса высоты. Но по сути он не образует БФЦ, то есть у него не будет каких-то других функций БФЦ, таких как предотвращение проблемы коллапса верхней и нижней маржи. Здесь проблема схлопывания верхнего поля решается путем установки элемента таблицы перед отображением (формируя BFC).
Использованная литература: