CSS. Блочная модель

Обтекание элементов

Однако CSS предоставляет специальное свойство float, которое позволяет установить обтекание элементов, благодаря чему мы можем создать более интересные и разнообразные по своему дизайну веб-страницы.

Это свойство может принимать одно из следующих значений:

left: элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента
right: элемент перемещается вправо
none: отменяет обтекание и возвращает объект в его обычную позицию

При применении свойства float для стилизуемых элементов, кроме элемента img, рекомендуется установить свойство width.

Определим интерфейс страницы сначала без свойства float:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обтекание в CSS3</title>
<style>

.image { 
margin:10px;
margin-top:0px;
}
.sidebar{
border: 2px solid #ccc;
background-color: #eee;
width: 150px;
padding: 10px;
margin-left:10px;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<div class="sidebar">Л. Толстой. Война и мир. Том второй. Часть третья</div>
<img src="dubi.png" class="image" alt="Война и мир" />
<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, 
чуть колыхаясь в лучах вечернего солнца...</p>
<p>«Нет, жизнь не кончена в 31 год, – вдруг окончательно, беспеременно решил князь Андрей...</p>
</div>

</body>
</html>

В данном случае мы получим последовательное размещение элементов на странице:

применим свойство float, изменив стили следующим образом:

	
.image { 
float:left;	/* обтекание слева */
margin:10px;
margin-top:0px;
}
.sidebar{
border: 2px solid #ccc;
background-color: #eee;
width: 150px;
padding: 10px;
margin-left:10px;
font-size: 20px;
float: right; /* обтекание справа */
}

Соответственно изменится и размещение элементов на странице:

Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть колыхаясь в лучах вечернего солнца...

«Нет, жизнь не кончена в 31 год, – вдруг окончательно, беспеременно решил князь Андрей...

Запрет обтекания. Свойство clear

Для запрета обтекания элементов в CSS применяется свойство clear. Свойство clear может принимать следующие значения:

left: стилизуемый элемент может обтекать плавающий элемент справа. Слева же обтекание не работает
right: стилизуемый элемент может обтекать плавающий элемент только слева. А справа обтекание не работает
both: стилизуемый элемент может обтекать плавающие элементы и относительно них смещается вниз
none: стилизуемый элемент ведет себя стандартным образом, то есть принимает участие в обтекании справа и слева

Прокрутка элементов

Cвойство overflow позволяет настроить поведение блока, когда содержимое выходит за его пределы, и добавить возможность прокрутки. Это свойство может принимать следующие значения:

auto: если контент выходит за границы блока, то создается прокрутка. В остальных случаях полосы прокрутки не отображаются
hidden: отображается только видимая часть контента. Контент, который выходит за границы блока, не отображается, а полосы прокрутки не создаются
scroll: в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуется
visible: значение по умолчанию, контент отображается, даже если он выходит за границы блока

Рассмотрим применение двух значений:

<style>
.article1{
width: 300px;
height: 150px;
margin:15px;
border: 1px solid #ccc;
overflow: auto;
}
.article2{
width: 300px;
height: 150px;
margin:15px;
border: 1px solid #ccc;
overflow: hidden;
}
</style>


<div class="article1">
<p>.......здесь очень большой текст
...........</p>
</div>
<div class="article2">
<p>.......здесь очень большой текст
...........</p>
</div>

Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и горя – ничего не было видно. Да, это тот самый дуб», – подумал князь Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.

Свойство overflow управляет полосами прокрутки как по вертикали, так и по горизонтали. С помощью дополнительных свойств overflow-x и overflow-y можно определить прокрутку соответственно по горизонтали и по вертикали.

Данные свойства принимают те же значения, что и overflow:

overflow-x: auto;
overflow-y: hidden;