Сегодня мы вспомним основные вещи в верстке: float, position, строчные и блочные элементы.
Свойство float:
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно.
Подробнее на htmlbook.ru
Подробнее на habrahabr
<div style=»clear:both;»></div> позволяет разместить следующее за ним cодержимое ниже плавающих блоков.
<br clear=»all»>
Атрибут clear — определяет положение строки текста за плавающим блоком. Может использоваться для очищения потока элементов.
Блочные и строчные элементы:
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги <address>, <blockquote>, <div>, <fieldset>, <form>, <h1>,…,<h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul> и некоторые устаревшие. Также блочным становится элемент, если в стиле для него свойство display задано как block, list-item, table и в некоторых случаях run-in.
Подробнее
Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги <img>, <span>, <a>, <q>, <code> и др., а также элементы, у которых свойство display установлено как inline. В основном они используются для изменения вида текста или его логического выделения.
Подробнее
Свойство position:
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
1) static Значение по умолчанию; Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
2) relative Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
3) absolute Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
4) fixed По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
5) inherit Наследует значение родителя.