Атрибут clear тега <br> — розрив обтікання

<p><b>Приклад використання атрибуту clear, коли  <code>clear=left </code></b></p>  
 <div style="float: left; background: #fd0; border: solid 1px black; padding: 10px; width: 40%">
 Однією з основних духовних потреб людини є спілкування. Спілкування з тим, кому можна довіряти, хто завжди зрозуміє та підтримає, на кого можна покластися у будь-якій життєвій ситуації. 
  </div>
  <br clear="left">
  <p>Саме таким і повинен бути справжній друг — щирим, відданим, порядним. У великому світі людині важко знайти собі такого друга, але ще важче — не втратити його через якусь дрібницю, не "розміняти" стосунки з ним. Справжнім є саме той друг, із яким разом пройшли і радощі, і печалі, і який і в радощах, і в печалях залишився поруч.</p>
<br>
<br>
<p><b>Приклад використання атрибуту clear, коли  <code>clear=right </code></b></p>  
 <div style="float: left; background: #fd0; border: solid 1px black; padding: 10px; width: 40%">
 Однією з основних духовних потреб людини є спілкування. Спілкування з тим, кому можна довіряти, хто завжди зрозуміє та підтримає, на кого можна покластися у будь-якій життєвій ситуації. 
  </div>
  <br clear="right">
  <p>Саме таким і повинен бути справжній друг — щирим, відданим, порядним. У великому світі людині важко знайти собі такого друга, але ще важче — не втратити його через якусь дрібницю, не "розміняти" стосунки з ним. Справжнім є саме той друг, із яким разом пройшли і радощі, і печалі, і який і в радощах, і в печалях залишився поруч.</p>

HTML

<p>Виберіть потрібне значення для <code>clear</code>:

<select id="form">
   <option value="all" name="value">all</option>
  <option value="left" name="value">left</option>
   <option value="right" name="value">right</option>
   <option value="none" name="value">none</option>
</select>
  </p>
<nav id='text'>Значення clear встановлено за замовчувнням</nav>
<hr>
 <div class="a1">
 Однією з основних духовних потреб людини є спілкування. Спілкування з тим, кому можна довіряти, хто завжди зрозуміє та підтримає, на кого можна покластися у будь-якій життєвій ситуації. 
  </div>
  <br id="image">
  <p>Саме таким і повинен бути справжній друг — щирим, відданим, порядним. У великому світі людині важко знайти собі такого друга, але ще важче — не втратити його через якусь дрібницю, не "розміняти" стосунки з ним.</p>

CSS

*{
  text-align:center;
}
.a1{
  float: left; 
  background: #fd0; 
border: solid 1px black; padding: 10px; 
  width: 40%;
}

JS

var wrapper = document.getElementById('image');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'left': 'Скасовано обтікання з лівого боку елемента.',
  'right': 'Скасовано обтікання з правого боку елемента',
  'all': 'Скасовано обтікання елемента одночасно з правого і лівого краю',
  'none': ' Дію атрибута скасовано' };

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

HTML

<h3>1. Нічого не урвано — підпис лишається збоку</h3>
<div class="demo">
  <div class="pic">float: left</div>
  Текст обтікає блок справа й далі тече в тій самій колонці, поки не закінчиться.
  <br>
  <span class="note">Підсумок</span>
</div>

<h3>2. Застарілий атрибут: &lt;br clear="all"&gt;</h3>
<div class="demo">
  <div class="pic">float: left</div>
  Текст обтікає блок справа й далі тече в тій самій колонці, поки не закінчиться.
  <br clear="all">
  <span class="note">Підсумок</span>
</div>

<h3>3. Те саме через CSS: clear: both</h3>
<div class="demo">
  <div class="pic">float: left</div>
  Текст обтікає блок справа й далі тече в тій самій колонці, поки не закінчиться.
  <br class="clear">
  <span class="note">Підсумок</span>
</div>

CSS

h3 { font-size: 15px; margin: 12px 0 6px; }
.demo { border: 1px solid #cbd5e1; padding: 10px; margin-bottom: 16px; }
.pic {
  float: left;
  width: 120px;
  height: 70px;
  margin-right: 12px;
  background: #93c5fd;
  color: #1e3a5f;
  font: 13px/70px system-ui, sans-serif;
  text-align: center;
}
.note { background: #fde68a; padding: 2px 6px; }
.clear { clear: both; }