Плавающие элементы

По умолчанию блочные элементы идут строго друг под другом. Изменить этот порядок можно сделав элементы «плавающими». Для этого служит CSS атрибут float. Он задает, по какой стороне будет выравниваться элемент: левой (left) или правой (right).

Плавающий элемент будет стремиться к левой или правой стороне родительского элемента, а с других сторон он может обтекаться текстом или другими элементами.

Пример:

<html>

<head>

<title>Плавающие элементы</title>

<style>

DIV#floating {

float: left;

}

</style>

</head>

<body>

Per Apollinem medicum et Aesculapium, Hygiamque et Panaceam

juro, deos deasque omnes testes citans, mepte viribus

et judicio meo hos jusjurandum et hanc stipulationem

plene praestaturum.<br>

<div id="floating"><img src="Hippocrates_rubens.jpg"

width="120" height="168"></div>

Illum nempe parentum meorum loco habiturum spondeo, qui

me artem istam docuit, eique alimenta impertirurum, et

quibuscunque opus habuerit, suppeditaturum.<br>

Victus etiam rationem pro virili et ingenio meo aegris

salutarem praescripturum a pemiciosa vero et improba

eosdem prohibiturum. Nullius praeterea precibus

adductus, mortiferum medicamentum cuique propinabo,

neque huius rei consilium dabo. Caste et sancte colam et

artem meam.<br>

</body>

</html>

Контейнер DIV стремится к левому краю документа, а с остальных трех сторон он обтекается текстом

Еще одним свойством, связанным с плавающими элементами, является clear. Clear запрещает обтекание элемента с левой (left), правой (right) или с обеих сторон (both). По умолчанию значение – none – обтекание разрешено.

Пример:

<html>

<head>

<title>Clear</title>

<style>

DIV {

border: solid black 1px;

width: 75px;

}

DIV.floating {

float: left;

}