Розуміння властивості очищення CSS

The

була частиною

з CSS1. Це дає змогу вказати, які елементи можуть плавати біля очищеного елемента та на якій стороні. The

властивість має п'ять можливих значень:

  • жоден
  • зліва
  • правильно
  • і те й інше
  • успадковувати

Як використовувати властивість очищення CSS

Найпоширеніший спосіб використання

властивість - це після використання

властивість елемента. Наприклад:

  • Текст поруч із моїм зображенням.
  • Текст, який знаходиться нижче мого зображення.

Усі елементи за замовчуванням до

, тому якщо ви не хочете, щоб інші елементи плавали біля чогось, ви повинні змінити

стиль.

Коли ви очищаєте поплавці, ви співпадаєте з вашим прозорим поплавком. Отже, якщо ви пропливали елемент ліворуч, то вам слід очистити ліворуч. Ваш плаваючий елемент буде продовжувати плавати, але очищений елемент і все після нього з’являться під ним на веб-сторінці.

Якщо у вас є елементи, які плаваються і вправо, і вліво, ви можете очистити лише одну сторону або ви можете очистити

.

Використання Очистити в макетах

Найпоширеніший спосіб використання більшості дизайнерів

майно є

. У вас може бути зображення, яке плаває всередині блоку тексту, і ви хочете, щоб наступний абзац починався під зображенням, або у вас може бути цілий стовпець тексту, який ви хочете плавати поруч з іншим набором тексту, а деякий текст з’являється внизу.

Ось HTML для макета у цій формі. У ньому є один контейнер Div, який містить інший, який плаває ліворуч.

Це буде добре, коли коротший div буде плисти ліворуч від решти вмісту головного div.

Ви можете очистити текст поруч із плаваючим полем, просто додавши тег там, де ви хочете, щоб він почав писати під плаваючим полем.

Але проблема виникає, коли плаваюча коробка довша за вміст поруч. Тоді, як бачите, колір фону основного поля не переноситься на дно плаваючого поля.

На щастя, існує простий спосіб виправити це: власність. Встановивши основне поле на

колір тла залишатиметься біля довшого плаваючого поля до самого низу.