Float та Clear

Русский перевод: Float и Clear

Ми можемо використовувати float з будь-яким елементом, який не був абсолютно позиційований. Це застосовується для визначення чи повинен елемент переміститися вліво, направо або не повинен зовсім. Ось список можливих значень:

left
right
none

Якщо елемент переміщається вліво (float: left), він вирівнюється по лівій стороні містить елемента, а весь наступний контент вирівнюється по правій стороні (до тих пір поки не досягне нижньої межі елементу).

Якщо елемент переміщається вправо, він вирівнюється по правій стороні, а весь наступний контент буде вирівняний по лівій стороні (до тих пір поки не досягне нижньої межі елементу).

У випадку, якщо ширина подальшого контенту зафіксована, він не буде переноситися нижче вирівняного float’ом div’а. Замість цього він застосує свою ширину.

Приклад коду

<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"></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"></div>
</div>
</body>
</html>

← Селектори, властивості і значення в CSS | Зовнішні таблиці стилів →