С помощью свойства Clearfix можно автоматически настроить родительский элемент в соответствии с дочерним элементом и исправить проблемы в HTML-коде с помощью некоторых атрибутов, таких как « переполнение », который управляет размерами родительских и дочерних элементов, не требуя дополнительных пометок.
Использование свойства Clearfix
Давайте разберемся с использованием свойства clearfix, чтобы узнать, что оно делает с выводом, добавив свойство clearfix CSS во фрагмент кода HTML:
Без свойства Clearfix
Давайте запустим фрагмент кода без выполнения свойства clearfix, чтобы понять, какие проблемы может решить clearfix:
Создайте класс в HTML, который вставляет изображение в контейнер div:
< див сорт '=' 'клирфикс' >
< бр >< изображение сорт '=' 'изображение' источник '=' 'изображение.png' все '=' 'изображение' ширина '=' '250' высота '=' '180' >
Текст...
< / див >
Ниже приведен код CSS для приведенного выше HTML:
<стиль >
.clearfix {
граница : 3 пикселя твердый #2баа12 ;
набивка : 5 пикселей ;
}
.img {
плавать : левый ;
}
>
Это сгенерирует выходные данные таким образом, что дочерний класс, содержащий изображение, переполнится за пределы контейнера. В подобных ситуациях можно использовать свойство clear fix, чтобы легко устранить или исправить эту проблему:
С свойством Clearfix
Чтобы решить эту проблему, мы можем просто добавить переполнение атрибут со значением, равным авто который отрегулирует родительский контейнер в соответствии с размером дочернего элемента:
<стиль >.clearfix {
граница : 3 пикселя твердый #2баа12 ;
набивка : 5 пикселей ;
}
.clearfix {
переполнение : авто ;
}
.img {
плавать : левый ;
}
>
Здесь, в этом фрагменте кода, родительский класс является контейнером, а изображение вставляется в его дочерний класс:
< див сорт '=' 'клирфикс' >< бр >< изображение сорт '=' 'изображение' источник '=' 'изображение.png' все '=' 'изображение' ширина '=' '250' высота '=' '180' >
Текст...
< / див >
Добавление свойства clearfix автоматически расширит родительский элемент (контейнер) в соответствии с размером дочернего элемента, в который вставлено изображение:
Вот как работает свойство Clearfix в HTML.
Заключение
Свойство clearfix используется для настройки дочерних элементов в HTML в соответствии с родительскими элементами с помощью простого свойства clearfix без необходимости дополнительной разметки. Использование CSS Clearfix увеличивает или уменьшает размеры родительских элементов, чтобы настроить их в соответствии с размерами дочерних элементов.