Свойства блоков CSS float, clear, max-width и max-height

Цель урока: Знакомство со свойствами блоков float, clear, margin-left, margin-right, max-width и max-height. с принципами табличной верстки CSS. Получение навыков использования блочной верстки сайта css

К оглавлению

Содержание:

Свойства блоков width, max-width, height, max-height

Свойства блоков width, max-width, height, max-height

width

ширина блока

max-width

height

высота блока

max-height

Возможные значения для всех свойств:

auto
величина в пикселях
%

Пример:

.div1{
	width:100%;
	background-color:#ccc;
}
.div2{
	width:50%;
	height:100px;
	background-color:#fc3;
}

</style></head> 
<body>
<div class="div1">div1
	<div class="div2">div2</div>
</div>

Результат:

float

блочность или обтекание

В обычном состоянии элемент div — блочный:

При использовании float элемент теряет блочность и выравнивается согласно значению:

При этом следует иметь в виду, что если блок, следующий дальше, не имеет установленного свойства float, то сам блок поместится за блок со значением свойства float:left. А содержимое блока (текст) будет обтекать блок со значением свойства float:left:

свойство float — Рис. Расположение блоков при использовании свойства float

Возможные значения float:

left

элемент выравнивается по левому краю, давая остальным элементам обтекать его справа

right

элемент выравнивается по правому краю, давая остальным элементам обтекать его слева

none

обтекание не задается (значение по умолчанию)

inherit

значение наследуется от родителя

Пример:

.left{
    float: left; /* Обтекание по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    width: 40%; /* Ширина блока */
}
.right{
    float: right; /* Обтекание по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    width: 40%; /* Ширина блока */
}

</style></head> 
<body>
<div class="left">float: left</div>
<div>Это пример обычного div. Это пример обычного div. Это пример обычного div. Это пример обычного div. Это пример обычного div.Это пример обычного div. Это пример обычного div.Это пример обычного div.Это пример обычного div. Это пример обычного div.</div>
<br/>
<div class="right">float: right</div>
<div>Это пример обычного div. Это пример обычного div. Это пример обычного div. Это пример обычного div. Это пример обычного div.Это пример обычного div. Это пример обычного div.Это пример обычного div.Это пример обычного div. Это пример обычного div.</div>
</div>

Результат:

clear

отмена обтекания

Возможные значения:

left

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

right

отмена обтекания элемента справа

both

отмена обтекания элемента и справа и слева

none

нет отмены обтекания (значение по умолчанию)

inherit

значение наследуется от родителя

Пример:

.left{
    float: left; /* Обтекание по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    width: 40%; /* Ширина блока */
}
.clear{
    clear: left; /* Обтекание по правому краю */
}

</style></head> 
<body>
<div class="left">float: left</div>
<div class="clear">Это пример div с clear. Это пример div с clear.</div>

Результат:

margin-left и margin-right

или выравнивание блока по центру

Значение auto для свойств margin-left и margin-right выравнивает блок по центру в своем контейнере (или браузере). При этом у элемента должна быть задана ширина.

Пример:

.center{
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    width: 300px; /* Ширина блока */
    margin-left: auto;
    margin-right: auto;
}

</style></head> 
<body>
<div class="center">Это пример div</div>

Результат:

К оглавлению