CSS clear — заборона обтікання плаваючих блоків

HTML

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

<div class="wrapper">
	<div class="block one">
		<div class="child">float: right;</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>

CSS

* {
	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;
	float: right;
}

.content p {
	margin: 0;
}

.block.two .content {
	clear: both;
}

HTML

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

<strong>float (для темного блоку):</strong><div class="inputs_float">
  <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>

<br><strong>clear (для світлого блоку):</strong> <div class="inputs_clear">
  <input id="none" checked name="clear" type="radio"/>
  <label for="none">none</label>
  <message for="none">Без задання. Дозволяє обтікання елемента з усіх сторін.</message>
  
  <input id="left" name="clear" type="radio"/>
  <label for="left">left</label>
  <message for="left">Скасовує обтікання з лівого краю елемента. При цьому всі елементи, що розташовані ліворуч будуть опущені вниз, тобто, розташуються під поточним елементом.</message>
  
  <input id="right" name="clear" type="radio"/>
  <label for="right">right</label>
  <message for="right">Скасовує обтікання з правого боку елемента. При цьому всі інші елементи розташовані праворуч будуть опущені вниз і розташуються під поточним елементом.</message>
  
  <input id="both" name="clear" type="radio"/>
  <label for="both">both</label>
  <message for="both">Скасовує обтікання елемента одночасно з правого і лівого краю.</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>

CSS

* {
  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;
  clear: none;
}

message {
  display: none;
}

.wm {
  min-height: 100px;
}

JS

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

document.querySelectorAll('.inputs_float input').forEach((el) => el.addEventListener('change', function () {
  document.querySelectorAll('#box .child').forEach((n) => n.style.setProperty('float', this.id));
  document.querySelectorAll('#box .child').forEach((n) => n.innerHTML = this.id);
}));
document.querySelectorAll('.inputs_clear input').forEach((el) => el.addEventListener('change', function () {
  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';
  document.querySelectorAll('#box .content').forEach((n) => n.style.setProperty('clear', this.id));
}));

HTML

<figure>
    <div class="box">
        <span class="ball"></span>
        <p>Короткий текст поруч із плаваючим блоком.</p>
    </div>
    <figcaption>батько не охоплює float</figcaption>
</figure>

<figure>
    <div class="box root">
        <span class="ball"></span>
        <p>Короткий текст поруч із плаваючим блоком.</p>
    </div>
    <figcaption>display: flow-root</figcaption>
</figure>

CSS

figure {
    display: inline-block;
    width: 220px;
    margin: 0 26px 0 0;
    font: 13px sans-serif;
    vertical-align: top;
}

figcaption {
    margin-top: 8px;
    font: 12px monospace;
    text-align: center;
}

.box {
    border: 2px solid #0172ad;
    background: #edf3f6;
}

.root {
    display: flow-root;
}

.ball {
    display: block;
    float: left;
    width: 70px;
    height: 70px;
    margin: 6px;
    background: #0172ad;
}

.box p {
    margin: 6px;
}

HTML

<p>Значення(ключові слова) для властивості <code>clear</code>:</p>
<hr>
<select id="form">
  <option value="none">none</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="both">both</option>
</select>
<hr>

<div class="float-l">
  <code>float: left;</code>
</div>

<div class="float-r">
  <code>float: right;</code>
</div>

<div id="block">
  Тестовий блок
</div>

<div class="float-r">
  <code>float: right;</code>
</div>

CSS

#block {
  font-family: monospace;
  background-color: #eee;
  border: 2px solid #666;
  padding: 16px;
  text-align: center;
  color: #222;
  margin-top: 36px;
  width: 150px;
  clear: none;
}

.float-l,
.float-r {
  background-color: #444;
  padding: 16px;
  width: 150px;
  text-align: center;
  color: #fff;
}

.float-l {
  float: left;
}

.float-r {
  float: right;
}

JS

var block = document.getElementById('block');
var form = document.getElementById('form');

form.onchange = function () {
  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      block.style.clear = form.options[i].value;
    }
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

HTML

<div class="left">
  <code>float; left;</code>
</div>

<div class="right">
  <code>float; right;</code>
</div>

<div class="clear">
  <code>clear: both;</code>
</div>

<div class="right">
  <code>float; right;</code>
</div>

CSS

div {
 background-color: #eee;
 border: 2px solid #666;
 color: #222;
 width: 175px;
 padding: 24px 16px;
 margin: 4px;
 text-align: center;
}
.right {
 float: right;
}
.left {
 float: left;
}
.clear {
 clear: both;
 background: #444;
 color: #f1f1f1;
 border-color: #111;
}