<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>
#block {
  font-family: momospace;
  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;
}
var block = document.getElementById('block');
var form = document.getElementById('form');

form.onchange = function() {
  for (var i = 0; i < form.options.length; i++) {
    if (form.options[i].selected == true) {
      block.style.clear = form.options[i].value;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.