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

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

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

У CSS властивість float використовується для того, щоб елемент обтікався іншими елементами на сторінці. Значення, які можна встановлювати для cssFloat, включають left, right, none та inherit. Використовуючи JavaScript, можна динамічно змінювати ці значення, маніпулюючи DOM.

Щоб змінити значення властивості cssFloat для елемента за допомогою JavaScript, спочатку потрібно отримати посилання на цей елемент. Потім можна використовувати властивість style для встановлення потрібного значення cssFloat.

Приклад: встановлення елемента плаваючим ліворуч.

let element = document.getElementById('myElement');
element.style.cssFloat = 'left';

Приклад: встановлення елемента плаваючим праворуч.

let element = document.getElementById('myElement');
element.style.cssFloat = 'right';

Приклад: скасування обтікання для елемента.

let element = document.getElementById('myElement');
element.style.cssFloat = 'none';

Значення inherit означає, що елемент успадковує значення float від свого батьківського елемента.

let element = document.getElementById('myElement');
element.style.cssFloat = 'inherit';

Практичні застосування

Властивість cssFloat часто використовується для створення складних макетів, де потрібно розмістити елементи поруч один з одним. Наприклад, якщо потрібно створити макет з двома колонками, де одна колонка буде обтікатися текстом з іншої.

Приклад: створення двоколонкового макету.

let leftColumn = document.getElementById('leftColumn');
let rightColumn = document.getElementById('rightColumn');
leftColumn.style.cssFloat = 'left';
rightColumn.style.cssFloat = 'left';

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

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

Додаткові поради

При використанні властивості cssFloat рекомендується також застосовувати очищення (clear) для елементів, які повинні відображатися під плаваючими елементами, щоб уникнути проблем з макетом.

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

Це забезпечить правильне відображення макету, коли плаваючі елементи використовуються для побудови складних макетів.

Загалом, властивість cssFloat є потужним інструментом для керування розташуванням елементів на сторінці, але її слід використовувати обережно, враховуючи можливий вплив на інші елементи.

Синтаксис

element.style.cssFloat

Значення

Return

Переглядачі

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

Приклади

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

let images = document.querySelectorAll('.image');
images.forEach(image => {
  image.style.cssFloat = 'left';
});

let element = document.getElementById('myElement');
element.style.cssFloat = window.innerWidth < 768 ? 'none' : 'right';