Выравнивание плавающих элементов

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

При работе с плавающими элементами и свойством float довольно часто можно столкнуться с проблемой выпадения из страницы плавающих элементов. У этой проблемы есть различные аспекты и их решения. Рассмотрим эти аспекты.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
            #sidebar{
				float: left;
				width: 25%;
				padding: 10px;
			}
			#main{
				border-left: 1px solid #ccc;
				width:75%;
				padding: 15px;
				margin-left: 25%; 
			}
        </style>
    </head>
    <body>
        <div id="sidebar">
			<h2>The standard Lorem Ipsum passage</h2>
			<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
				eiusmod tempor incididunt ut labore et dolore...</p>
		</div>
        <div id="main">
			<h2>What is Lorem Ipsum?</h2>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
			<p>Contrary to popular belief, Lorem Ipsum is not simply random text..</p>
		</div>
    </body>
</html>

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

Выпадение плавающих блоков в HTML5

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

Почему так происходит? Зачастую браузеры своеобразно интерпретируют размеры элемента. В частности, у всех элементов по умолчанию для свойства box-sizing используется значение content-box, то есть при определении ширины и высоты элемента браузер будет прибавлять к значению свойств width и height также и внутренние отступы padding и ширину границы. В итоге это может привести к выпадению плавающих элементов из тех блоков, которые для них предназначены. Поэтому часто для всех элементов рекомендуется устанавливать для свойства box-sizing значение border-box, чтобы все элементы измерялись одинаково, а их ширина представляла только значение свойства width. Поэтому нередко в стилях добавляется следующий стиль:

* {
	box-sizing: border-box;
}

То есть значение box-sizing: border-box; устанавливается для всех элементов, и все они интерпретируются браузером одинаково. К примеру, добавим этот стиль в выше определенную страницу и мы получим уже несколько другой результат:

border-box и float в CSS3

Рассмотрим другую проблему, которая связана с позиционированием плавающих элементов в контейнере:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
		<style>
			*{
				box-sizing: border-box;
			}
			#header{
				background-color: #eee;
			}
			#nav{
				background-color: #f4f4f4;
				border-top: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
			}
			#nav ul{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			#nav li { 
				float: left;
			}
			#nav ul a {
				display: block;
				width: 7em;
				padding:10px;
				border-left: 1px solid #ccc;
				text-decoration: none;
				color: #333;
				text-align: center;
			}
			#nav ul li:last-child a {
				
				border-right: 1px solid #ccc;
			}
			#nav ul a:hover{
				background-color: #aaa;
				color: #f4f4f4;
			}
		</style>
    </head>
    <body>
		<div id="header">
			<h1>Добро пожаловать на сайт</h1>
			<div id="nav">
				<ul>
					<li><a href="#">Главная</a></li>
					<li><a href="#">Блог</a></li>
					<li><a href="#">Контакты</a></li>
					<li><a href="#">О сайте</a></li>
				</ul>
			</div>
		</div>
		<div id="content"><p>helo world</p></div>
    </body>
</html>
навигация float в CSS3

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

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

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, 
ol, ul, li, form, table, caption, tr, th, td, article, aside, footer, header{
				
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

Другая проблема - наложение элемента div с основным контентом на плавающий блок навигационной панели решается довольно просто - установкой для этого элемента div следующего стиля:

clear: both;

Более сложной является проблема с выпадением плавающих элементов меню из границ блока-контейнера. Здесь есть два возможных варианта Решения. Первое решение состоит в добавлении к элементу, который представляет панель навигации, следующего стиля:

ul:after {
	content: " ";
	display: table;
	clear: both;
}

Второе решение состоит в том, чтобы сделать сам блок панели навигации плавающим:

#nav{
	background-color: #f4f4f4;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	
	float:left;
	width: 100%;
	clear: both;
}

Итак, с учетом выше сказанного изменим стили для веб-страницы (код html остается прежним):

*{
	box-sizing: border-box;
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, 
ol, ul, li, form, table, caption, tr, th, td, article, aside, footer, header{
				
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
#header{
	background-color: #eee;
}
#header h1{
	font-size: 1.3em;
	padding: 15px;
}
#nav{
	background-color: #f4f4f4;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#nav ul{
	margin-left: 0px;
	padding-left: 0px;
	list-style: none;
}
#nav li { 
	float: left;
}
#nav ul a {
	display: block;
	width: 7em;
	padding: 10px;
	border-left: 1px solid #ccc;
	text-decoration: none;
	color: #333;
	text-align: center;
}
#nav ul li:last-child a {
				
	border-right: 1px solid #ccc;
}
#nav ul a:hover{
	background-color: #aaa;
	color: #f4f4f4;
}
#nav ul:after {
	content: " ";
	display: table;
	clear: both;
}
#content{
	clear: both;
}

И теперь веб-страница будет выглядеть иначе, собственно как и должна:

Выравнивание блока ссылок в HTML

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

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