Оба плавающих и абсолютно позиционированные элементы вынимаются из потока документов. Тогда почему clearfix hack работает только с плавающими элементами не на абсолютно позиционированных элементах?Почему очистка clearfix работает только с плавающими элементами?
FLOAT: Когда вы плаваете элемент, элемент не вынимается. Float не удаляет элемент из потока документа.
Положение АБСОЛЮТНО: При позиционировании элемента элемент вынимается (помещается над другими элементами). Абсолютное позиционирование удаляет элемент из потока документа. Элемент с абсолютным позиционированием больше не влияет на расположение других элементов документа.
Это лучший пример, который вы можете легко понять: Check this
Официальный учебник w3.org гласит: «Плавающий ящик взят ** из ** потока документов ..._ Ref: 3-й абзац https://www.w3.org/wiki/Floats_and_clearing#How_does_floating_work.3F – user31782
К сожалению, для неправильное представление о плавающих элементах. –
Существует распространенное заблуждение, что поплавки удаляются постоянно из потока документов.
Это не тот случай, перемещаемый элемент удаляется со своего стандартного положения в потоке и сдвигается как можно дальше влево или вправо на их текущей линии, в зависимости от указанного плавающего направления.
Поплавок представляет собой коробку, которая смещается влево или вправо на текущей строке. Наиболее интересной характеристикой плавающего (или «плавающего» или «плавающего») является то, что содержимое может протекать вдоль его стороны (или запрещается это делать с помощью свойства «clear»). Содержимое течет вниз с правой стороны поля слева и слева от правой панели.
Поплавковая коробка сдвигается влево или вправо, пока ее внешняя кромка не коснется края блока или внешнего края другого поплавка. Если есть строка строки, внешний верх плавающего поля выравнивается с верхней частью текущего строкового поля.
Плавающие элементы влияют на элементы вокруг них, абсолютно позиционированные элементы нет.
W3 Spec абсолютное позиционирование
В модели абсолютного позиционирования, коробка явно смещена относительно его содержащего блока. Он полностью удаляется из нормального потока (он не влияет на будущих братьев и сестер).
Обратите внимание на разницу?
Таким образом, clearfix (или разрешение) влияет только на плавающие элементы. Очистительное поле не используется для clear плавающие элементы, используется для содержит плавающие элементы внутри другого элемента.
Существует отличная статья об CSS-трюках, которая объясняет All About Floats и охватывает различия между ними и позиционирование.
_Content течет вниз с правой стороны левого плавающего поля и вниз по левой стороне прямоугольного поля. _ По _Content_ они означают только текст и изображения? – user31782
Yep ... если возможно. - http://learnlayout.com/float.html –
Имеет ли это какое-то отношение к типу отображения содержимого? Например. делает ли только элемент 'inline' поток вокруг элементов с плавающей точкой, а элементы уровня блока рассматривают их как абсолютно элементы позиции? – user31782
больше похож на свойство css clear и используется только для очистки поплавков –
@DhavalChheda [clearfix] (https://css-tricks.com/snippets/css/clear-fix/) является _not_ свойством css. Это своего рода хак. – user31782
Да, но clearfix использует свойство clear. И свойство clear влияет только на float - потому что только float могут быть очищены. У позиционированных элементов нет такой концепции «зазора». – BoltClock