Clearfix - поток почистване с опазването на структурната схема
- блок родител
- плаваща единица вграден в основния блок
- текст (или блок или каквото), който ще обгърне с плаваща единица (необходими за демонстрация)
- каква височина в този случай ще има родител блок (DIV клас = "майка")?
- Когато се блока (DIV клас = "nextStaticBlock"), поставен под родител блок?
Правилни отговори по-долу:
Той очаква, че следващия блок се намира под блок-майка, чиято височина е равна на височината на най-високата детска блок (в този пример, височината на плаващ блок)
в действителност, на следващия блок (в повечето браузъри) наистина е единица под-майка, но височината на родителя, равна на височината на (не-плаваща) съдържанието на статично
Старият решение
Обдухва поток с помощта на допълнителен елемент, поставен в края на родителското устройство с имота или атрибут ясно (
):Demo. Недостатък на този метод - няма един прав, разваляне на структурно и семантично код елемент. Често с една-единствена цел - чиста поток.
Новото решение
актуализация 12/17/09 Егор Скорняков - да се скрие точката по-добре да се използва видимост. вместо скрит преливник. скрита, защото В някои браузъри, въпросът е все още видими.
Изчистете поток преливане: скрит
актуализация от Егор Скорняков
Същото се отнася и за пречистване на отпадъчни води са по-последователен начин - да добавите правило да прелее. скрит родител, който съдържа плаващи елементи:
Demo пример. Методът е по-просто, но не се прилага винаги (например, когато предприятието майка е абсолютно позиционирани елементи, които трябва да излизат извън границите на родителя пример -. Падащото меню).
микро clearfix
Ако не се нуждаят от подкрепата на IE6-7:
Ако е необходимо, след това по-безопасно да се използва тази опция: