Float и Clear

Переклад українською: Float та Clear

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

left
right
none

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

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

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

Пример кода Float

<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 – разрешено обтекание

Примеры кода Clear

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<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">
<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"></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>

← Div и Span | Селекторы, свойства и значения в CSS →