Float и Clear для блочной верстки

Теория

Мы можем использовать float с любым элементом, который не был абсолютно спозиционирован. Это применяется для определения должен ли элемент переместиться влево, направо или не должен совсем. Вот список возможных значений:

  • left
  • right
  • none

Если элемент перемещается влево (float:left), он выравнивается по левой стороне содержащего элемента, а весь последующий контент выравнивается по правой стороне (до тех пор пока не достигнет нижней границы элемента).

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

В случае, если ширина последующего контента зафиксирована, он не будет переноситься ниже выровненного float’ом div’а. Вместо этого он применит свою ширину.

Пример кода с Float и Clear

<html>
<head>
<title>CSS Float</title>
</head>
<body>
<h1 style="text-align:center">CSS Float</h1>

<div style="float:left">
<h2>Float Left</h2>
<div style="width:100px; border: 2px solid black">
<img src="Images/block.gif" height="50"
width="50" style="float:left" />
This is just text. This is just text. This is just text.
</div>
<h2>Float Left - Div</h2>
<div style="width:100px; height:180px; border: 2px solid black">
<div style="float:left;">
<img src="Images/block.gif" height="50" width="50" />
</div>
<div style="width:40px; float:left;">
This is just text. This is just text. This is just text.
</div>
</div>
</div>

<div style="float:right">
<h2>Float Right</h2>
<div style="width:100px; border: 2px solid black">
<img src="Images/block.gif" height="50"
width="50" style="float:right" />
This is just text. This is just text. This is just text.
</div>
<h2>Float Right - Div</h2>
<div style="width:100px; height:180px; border: 2px solid black">
<div style="float:right">
<img src="Images/block.gif" height="50" width="50" />
</div>
<div style="width:40px;">
This is just text. This is just text. This is just text.
</div>
</div>
</div>
</body>
</html>

Clear

Мы можем использовать свойство clear для определения, должен ли контент, который «обтекает» float-блок, быть сброшен вниз. Вот список возможных значений:

  • left – не допускает обтекание «floated» объекта слева
  • right – запрещает обтекание элемента справа
  • both – запрещает обтекание объекта с обеих сторон, т.е. и слева, и справа
  • none – разрешено обтекание

Пример для изучения:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#wrapper {
position:absolute;
left:50%;
top:30px;
width: 450px;
margin-left:-225px;
}

.box {
border: 2px solid #f00;
background-color:#000066;
color:#f90;
text-align:center;
font-size:100px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}

#box2 {
top:10px;
left:10px;
height:200px;
width:200px;
margin-bottom:15px;
}

#box1 {
float:right;
height:400px;
width:200px;
margin-bottom:15px;
}

#box3 {
height:100px;
width:100%;
clear:both;
}
</style>
<title>Positioning Boxes</title>
</head>

<body>
<div id="wrapper">
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
</div>
</body>
</html>

Для закрепления:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#wrapper {
width:800px;
}

#insideWrapper {
width:612px;
position:relative;
left:50%;
margin-left:-311px;
}

.box {
border: 2px solid #f60;
background-color:#006;
color:#f90;
text-align:center;
font-size:100px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}

#box1 {
float:left;
top:10px;
left:10px;
height:300px;
width:200px;
}

#box2 {
float:left;
height:400px;
width:200px;
}

#box3 {
float:left;
height:300px;
width:200px;
}

#divClear {
height:50px;
clear:both;
border:4px solid #000;
background-color:#f00;
}

#divTop {
height:50px;
border:4px solid #000;
background-color:#00f;
}
</style>
<title>Positioning Boxes</title>
</head>

<body>
<div id="wrapper">
<div id="divTop" style=""></div>
<div id="insideWrapper">
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
</div>
<div id="divClear" style="background:red"></div>
</div>
</body>
</html>

Фото




Видео




Автор Cascading Style Sheets