<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>

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

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

body {
  font-family: 'Fira Sans', 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;
}

var $message = $('#message');

$('.inputs_float').find('input').on('change', function(){
  $('#box .child').css('float', $(this).attr('id'));
  $('#box .child').html($(this).attr('id'));
});
$('.inputs_clear').find('input').on('change', function(){
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  $('#box .content').css('clear', $(this).attr('id'));
});