JS властивість CSSStyleDeclaration.clear

Загальний опис

element.style.clear - це властивість CSS, яка встановлює або змінює поведінку елемента щодо очищення плаваючих елементів навколо нього. Властивість clear зазвичай використовується для того, щоб уникнути обтікання плаваючих елементів (які використовують властивість float), що може порушити макет сторінки.

Значення властивості clear можуть бути наступними: none, left, right, both, а також inherit та initial. Кожне з цих значень має своє застосування. Значення none (за замовчуванням) означає, що елемент не буде очищати плаваючі елементи і вони можуть обтікати його з обох сторін. Значення left очищає плаваючі елементи зліва від елемента, значення right - справа, а значення both очищає плаваючі елементи з обох сторін.

Ось приклад, як встановити очищення плаваючих елементів з обох сторін для конкретного елемента:

let element = document.getElementById('myElement');
element.style.clear = 'both';

У цьому прикладі елемент з ідентифікатором myElement більше не буде обтікатися плаваючими елементами з обох сторін, гарантуючи, що він почнеться з нової лінії.

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

let column1 = document.getElementById('column1');
let column2 = document.getElementById('column2');
let footer = document.getElementById('footer');

column1.style.float = 'left';
column2.style.float = 'left';
footer.style.clear = 'both';

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

Ще один важливий аспект використання clear - це забезпечення правильного відображення елементів, що можуть накладатися один на одного через використання float. Наприклад, якщо у вас є плаваючий елемент всередині контейнера, і ви хочете, щоб наступний елемент не перекривався плаваючим елементом, ви можете використати clear:

let floatingElement = document.getElementById('floatingElement');
let nonFloatingElement = document.getElementById('nonFloatingElement');

floatingElement.style.float = 'left';
nonFloatingElement.style.clear = 'left';

У цьому прикладі nonFloatingElement буде відображатися під floatingElement, а не обтікати його з правого боку.

Таким чином, властивість element.style.clear є важливим інструментом для управління макетом сторінки, особливо при роботі з плаваючими елементами. Вона допомагає забезпечити правильне відображення елементів, уникнути накладань і зберегти структуру сторінки, що робить її корисною для створення адаптивних та складних веб-дизайнів.

Синтаксис

element.style.clear

Значення

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

let container = document.getElementById('container');
let toggleButton = document.getElementById('toggleButton');

toggleButton.addEventListener('click', function() {
  let newElement = document.createElement('div');
  newElement.style.float = 'left';
  newElement.style.width = '100px';
  newElement.style.height = '100px';
  newElement.style.backgroundColor = 'blue';
  container.appendChild(newElement);

  let clearElement = document.createElement('div');
  clearElement.style.clear = 'both';
  container.appendChild(clearElement);
});

let resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    let containerWidth = entry.contentRect.width;
    let clearElement = document.getElementById('clearElement');

    if (containerWidth < 500) {
      clearElement.style.clear = 'both';
    } else {
      clearElement.style.clear = 'none';
    }
  });
});

let container = document.getElementById('responsiveContainer');
resizeObserver.observe(container);