Вложенные плавающие блоки

Последнее обновление: 24.04.2016

Нередко встречается ситуация, когда к вложенным в обтекающий блок элементам также применяется обтекание. Например, блок основного содержимого может включать блок собственно содержимого и блок меню. В принципе к таким блокам будут применяться все те же правила, что были рассмотрены ранее.

Определим сначала последовательно все блоки веб-страницы:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
			div{
				margin: 10px;
				border: 1px solid black;
				font-size: 20px;
				height: 80px;
			}
            #header{ 
				background-color: #ccc;
			}
			#sidebar{
				background-color: #bbb;
				float: right;
				width: 150px;
			}
			#main{
				background-color: #fafafa;
				height: 200px;
				margin-right: 170px;
			}
			#menu{
				background-color: #ddd;
			}
			#content{
				background-color: #eee;
			}
			#footer{ 
				background-color: #ccc;
			}
        </style>
    </head>
    <body>
		<div id="header">Шапка сайта</div>
		<div id="sidebar">Правый сайдбар</div>
		<div id="main">
			<div id="menu">Меню</div>
			<div id="content">Основное содержимое</div>
		</div>
		<div id="footer">Футер</div>
    </body>
</html>

Опять же в главном блоке вложенные блоки идут последовательно: сначала блок меню, а потом блок основного текста.

Блочная верстка вложенных элементов в HTML5 и CSS3

Теперь применим обтекание к блоку меню:

#menu{
	background-color: #ddd;
	float: left;
	width: 160px;
}
#content{
	background-color: #eee;
	margin-left: 180px;
}

Опять же у плавающего элемента, коим является блок меню, устанавливаются свойства float и width. А у обтекающего его блока content устанавливается отступ слева.

Блочная верстка вложенных элементов и float в HTML и CSS

Аналогично можно сделать блок меню справа:

#menu{
	background-color: #ddd;
	float: right;
	width: 160px;
}
#content{
	background-color: #eee;
	margin-right: 180px;
}
Параметры блочной верстки в HTML и CSS

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850