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 за допомогою JavaScript в залежності від умов, що змінюються динамічно. Наприклад, можна змінювати поведінку очищення в залежності від кількості дитячих елементів у контейнері або їх розміру. Це дозволяє створювати гнучкіші та динамічніші інтерфейси:

let dynamicElement = document.getElementById('dynamicElement');
if (dynamicElement.children.length > 3) {
  dynamicElement.style.clear = 'both';
}

автор: Bond правити

Порада

При створенні макетів з плаваючими елементами, спробуйте використовувати clear на псевдоелементах ::after або ::before для автоматичного очищення плаваючих елементів всередині контейнера. Це дозволяє уникнути додавання додаткових чистих елементів у HTML-код і зберегти його чистоту. Наприклад:

let container = document.getElementById('container');
container.style.cssText = "::after { content: ''; display: block; clear: both; }";

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.clear

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div id="container">Демонстраційний елемент</div>
<button id="toggleButton">Перемкнути</button>

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);
});

<div id="clearElement">Демонстраційний елемент</div>
<div id="responsiveContainer">Демонстраційний елемент</div>

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);