Својство float за блокове у CSS-у

Својство float није применљиво само на слике, већ и на све остале блокове.

Хајде да то проверимо.

Претпоставимо да имамо родитељски блок са класом parent, а унутар њега се налази текст и дете блок са класом child. Обама блоковима је задата ивица, а детету и ширина са висином:

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

Результат:

Сада ћемо детету поставити float на вредност left - текст ће почети да тече око нашег блока:

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

Результат:

Задание 1

Поновите страницу по овом узору: