Свойство clear работает по отношению к свойству float. Оно устанавливает, должен ли элемент быть перемещен ниже плавающих элементов, которые ему предшествуют.
Давайте разберемся в этом на примере.
Рассмотрим четыре блока – красный, желтый, синий и зеленый, которые будут добавлены один за другим, и все они будут расположены на одном уровне.
Затем мы заставим каждый элемент плавать влево по очереди, что означает, что они будут перемещены на один уровень выше их первоначального положения. Это позволит другим неплавающим элементам обернуться вокруг плавающего элемента.
Примечание – Следующий блок будет занимать позицию плавающего блока, поэтому он не виден. Когда мы изменим размер следующего блока, мы увидим, что он закрыт плавающим блоком, который находится на один слой выше него.
После этого мы применим clear:left к синему блоку, что означает, что слева от синего блока не будет плавающего элемента.
С помощью свойства clear мы можем указать, с какой стороны от плавающих элементов не разрешается плавать. Оно задает или возвращает позицию по отношению к плавающим объектам.
Значения, принимаемые в свойстве clear.
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
clear: inherit;
clear: initial;
clear: revert;
clear: revert-layer;
clear: unset;
Вы можете найти код здесь
Я постарался рассказать о работе свойства CSS clear на базовом примере для лучшего понимания. Пожалуйста, поделитесь своими примерами и дополните этот пост 😊.
Счастливого обучения! 👩🏻💻