Плавающие элементыПо умолчанию блочные элементы идут строго друг под другом. Изменить этот порядок можно сделав элементы «плавающими». Для этого служит 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; } </style>; </head>; <body>; <div class="floating">Блок 1</div>; <div class="floating">Блок 2</div>; <div style="clear: both">Блок с запретом обтекания</div>; <div class="floating">Блок 3</div>; <div class="floating">Блок 4</div>; <div class="floating">Блок 5</div>; </body>; </html>;
|
