CSS float — обтікання елемента текстом

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

В CSS є блокові елементи (завжди починаються з нового рядка), а є рядкові (відображаються на сторінці в один рядок).

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

CSS3 розширює попереднє визначення, дозволяючи властивості впливати на рядкові елементи, колонки і сторінки.

При застосуванні цієї властивості відбувається наступне:

• Елемент позиціонується як зазвичай, а потім виймається з потоку і зсувається вліво (для left) або вправо (для right) до того як торкнеться або кордону батька, або іншого елемента з float.
• Якщо простору по горизонталі не вистачає для того, щоб вмістити елемент, то він зсувається вниз до тих пір, поки не почне поміщатися.
• Інші непозиціоновані блокові елементи без float поводяться так, як ніби елемента з float немає, так як він прибраний з потоку.
• Рядки (inline-елементи), навпаки, «знають» про float і обтікають елемент по сторонам.

Ще деталі:

• Елемент при наявності float отримує display: block.

Тобто, вказавши елементу, у якого display: inline властивість float: left / right, ми автоматично зробимо його блоковим. Зокрема, для нього будуть працювати width / height.

Винятком є деякі рідкісні display зразок inline-table і run-in.

• Ширина float-блоку визначається за вмістом.
• Вертикальні відступи margin елементів з float не зливаються з відступами сусідів, на відміну від звичайних блочних елементів.

правити

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

правити

Порада

Відмічуо, що значення властивості впливає лише на той елемент для якого вона задана.

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

Порада

Сторінки CSS3, для яких можна буде задавати float, зараз знаходяться тільки у розробці. Тому CSS3-значення наведені тут, можуть змінюватися у майбутньому. Наприклад поки що під питанням залишаються: block-start, block-end, top, bottom, snap-block, snap-inline.

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

Нотатка

Абсолютно позиційовані елементи ігнорують властивість float.

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

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

Синтаксис

float: none|left|right|initial|inherit|inline-start|inline-end;

Властивість float може отримувати 7 значень:

none

Обтікання елемента не задано. Без задання.

автор: Svitlana

правити

left

Вирівнює елемент по лівому краю, а всі інші елементи обтікають його по правому.

автор: Svitlana

правити

right

Вирівнює елемент по правому краю, а всі інші елементи будуть обтікати його по лівому.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

inline-start

Вирівнює елемент по першій лінії лівого кута області для обтікання.

автор: Svitlana

правити

inline-end

Вирівнює елемент по останній лінії лівого кута області для обтікання.

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	1	1	1	7	12	4

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

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

Приклади

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

<p>Цей приклад показує як працює властивість <code>float</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити метод обтікання темного блоку нижче.</p>

<div class="inputs">
  <input id="none" checked name="float" type="radio"/>
  <label for="none">none</label>
  <message for="none">Обтікання елемента не задано. Без задання.</message>
  
  <input id="left" name="float" type="radio"/>
  <label for="left">left</label>
  <message for="left">Вирівнює елемент по лівому краю, а всі інші елементи обтікають його по правому.</message>
  
  <input id="right" name="float" type="radio"/>
  <label for="right">right</label>
  <message for="right">Вирівнює елемент по правому краю, а всі інші елементи будуть обтікати його по лівому.</message>
</div>

<div class="wm">
  <p id="message">Обтікання елемента не задано. Без задання.</p>
</div>

<hr>

<div id="box">
  <div class="child">block</div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
}

#box {
  margin-top: 25px;
  line-height: 1.45;
  width: 400px;
  background-color: gold;
  padding: 4px;
}

.child {
  background-color: #222;
  color: #999;
  padding: 16px;
  float: none;
  text-align: center;
}

.content {
  background-color: #ccc;
  padding: 2px 4px;
}

message {
  display: none;
}

.wm {
  min-height: 100px;
}

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#box .child').forEach((n) => n.style.setProperty('float', this.id));
  document.querySelectorAll('#box .child').forEach((n) => n.innerHTML = this.id);

}));

<div class="info">
	<p>За допомогою властивості <code>float</code> ми можемо визначити по якій стороні буде вирівнений елемент.</p>
	<p>Нижче, для темного блоку другого контейнера, ми визначили обтікання ліворуч.</p>
</div>

<div class="wrapper">
	<div class="block one">
		<div class="child">float: none;</div>
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
	</div>
	<div class="block two">
		<div class="child">float: right;</div>
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
	</div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
}

.info {
	padding: 4px 6px;
}

.info p {
	margin-bottom: 16px;
	margin-top: 0;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	width: 25%;
	height: 150px;
	background-color: gold;
	position: relative;
	font-size: 13px;
	padding: 4px;
}

.content {
	background-color: #ccc;
	padding: 2px 4px;
}

.child {
	color: #999;
	background-color: #222;
	padding: 2px 4px;
	display: inline-block;
}

.content p {
	margin: 0;
}

.block.two .child {
	float: right;
}

<div class="box">
    <div class="ph">float</div>
    <p>Текст обтікає плаваючий блок збоку, але рамка батька проходить вище за нього.</p>
</div>

<div class="box fix">
    <div class="ph">float</div>
    <p>Той самий блок із <b>display: flow-root</b> — рамка охоплює і текст, і плаваючий елемент.</p>
</div>

.box {
    border: 2px solid #d24317;
    margin-bottom: 20px;
    background: #fbfbfb;
}

.fix {
    display: flow-root;
    border-color: #398712;
}

.ph {
    float: left;
    width: 90px;
    height: 90px;
    margin: 8px;
    background: #0172ad;
    color: #fff;
    text-align: center;
    line-height: 90px;
}

<div class="float-left">Float Left</div>
<div class="float-right">Float Right</div>
<div>float: none;</div>

div {
  padding: 16px;
  width: 100px;
  text-align: center;
  font-family: monospace;
  border: 5px solid #666;
  background-color: #eee;
}

div.float-left { 
  float: left;
}

div.float-right { 
  float: right;
}

<label>
  Задати значення для блоку:
  <input type="checkbox" id="field">
  <span>float: left;</span>
</label>

<div class="wrapper">
  <div id="block">
    <p>Блок</p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

body {
  font-family: monospace;
  font-size: 18px;
  color: #222;
  line-height: 1.45;
}

label {
  padding: 16px 0;
  display: block;
  border-bottom: 2px dashed #666;
}

span {
  padding: 4px 6px;
  background-color: orange;
  border-radius: 4px;
}

.wrapper {
  background-color: #eee;
  padding: 16px;
  margin-top: 16px;
  border-radius: 4px;
}

#block {
  background-color: #666;
  padding: 16px;
  width: 100px;
  text-align: center;
  color: #ddd;
  border-radius: 4px;
}

document.getElementById('field').onchange = function () {
  document.getElementById('block').style.cssFloat = this.checked ? 'left' : 'none';
};
//# sourceURL=pen.js