Proprietatea float pentru blocuri în CSS

Proprietatea float este aplicabilă nu doar imaginilor, ci și oricăror alte blocuri.

Să verificăm acest lucru.

Să presupunem că avem un bloc părinte cu clasa parent, iar în interiorul său se află text și un bloc copil cu clasa child. Ambilor blocuri le este atribuită o bordură, iar copilului încă lățime și înălțime:

html<div class="parent">
  <div class="child"></div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Să setăm acum copilului float la valoarea left - textul va începe să curgă în jurul blocului nostru:

html<div class="parent">
  <div class="child"></div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат: