Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Float

Использование плавающих блоков в CSS

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

Свойство float

Это свойство определяет по какой стороне будет выровнен блок и будет ли он плавающим. Оно имеет следующие значения:

Давайте рассмотрим с вами небольшой пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
  <title>float</title>
  <style type="text/css">
   .box {
    float: right; /* Обтекание по левому краю */
    background: #fd0;  /* Цвет фона */
    border: 1px solid green;  /* Параметры рамки */
    padding: 15px;  /* Поля вокруг текста */
    margin-right: 20px;  /* Отступ справа */
    margin-left: 20px;  /* Отступ слева */
    width:200px; /* Ширина блока */
   height:200px; /* Высота блока */
   }
  </style>
 </head> 
 <body> 
  <div class="box">
   Другие элементы будут будут обтекать этот плавающий блок 
по левому краю.
  </div>  
   А вот и другие элементы обтекающие блок слева
 </body>
</html>

В результате должно получиться следующее:

Использование свойства float

Как видите из примера созданный плавающий блок обтекается текстом. Говоря о плавающих блоках следует затронуть такое свойство, как clear

Свойство clear

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

Чтобы получше понять, как используют данное свойство, давайте немного изменим предыдущий пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<head>  
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
  <title>clear</title>
<style type="text/css">
.box {
	float: right; /* Обтекание по левому краю */
	background: #fd0;
 /* Цвет фона */ 	
	width: 200px;/* Ширина блока */
	height: 200px;/* Высота блока */
	margin-right: 20px;/* Отступ справа */
	margin-left: 20px;/* Отступ слева */
	border: 1px solid green;/* Параметры рамки */
	padding: 15px;/* Поля вокруг текста */	
}
.box2{
	display:block;
	clear: both;
} 
</style>
 </head> 
 <body> 
  <div class="box">
   Другие элементы не будут обтекать этот плавающий блок по
 левому краю.
  </div> 
<div class="box2"> 
   А вот и другие элементы, которые больше не обтекают наш 
блок слева
</div>
 </body>
</html>

В результате должно получиться следующее:

Свойство clear

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



наверх