CSS. Обтекание элементов. Всплывающие элементы

     Для обтекания одних элементов другими в CSS применяется свойство float, которое может иметь значения left (обтекание слева направо), right (обтекание справо на лево) или none. Допустим, у нас есть рисунок и мы хотим чтобы текст окружал его. Для этого мы должны определить ширину бокса, который будет окружать наш рисунок и применить в свойстве float значение left. (см.пример)

Пример:

<html>
  <head>
    <title>Пример</title>
    <style type="text/css">
       .box{
float:left;
width: 100px;
}
    </style>
  </head>
<body>
   <h4>Обтекание слева направо </h4>
  <div  class="box">
<img src="images/dwar_240x400_trusishka.jpg"  style="width:85px;height:72px;">
</div>
<p>Увлекательнейшая онлайн-игра, действие которой разворачивается в фэнтези мире Фэо. На протяжении многих лет здесь идет война между людьми и магмарами. Два великих дракона стоят на страже интересов обеих рас. Нет силы, способной противостоять мощи гигантов, но когда приходит хаос, даже они не в силах сдерживать зыбкий баланс сил.</p>
   </body>
</html>

 

Результат: (открыть в браузере)

     Если вы заметили, то при обтекании элементы смещаются вверх ( в нашем примере текст смещается вверх вдоль картинки), заполняя всё доступное пространство. Так вот чтобы остановить обтекание применяется свойство clear, которое может принимать значения left, right, both или none.
     Допустим, мы не хотим чтобы дальше часть текста всплывала вверх перед рисунком. Для этого добавляем такой CSS код:
.boxstop {
clear:both;
}

Пример:

<html>
  <head>
    <title>Пример</title>
    <style type="text/css">
       .box{
float:left;
width: 100px;
}
.boxstop {
clear:both;
}
    </style>
  </head>
<body>
   <h4>Прерывание обтекания. </h4>
  <div  class="box">
<img src="images/dwar_240x400_trusishka.jpg"  style="width:85px;height:72px;">
</div>
<p>Увлекательнейшая онлайн-игра, действие которой разворачивается в фэнтези мире Фэо.</p>
<p class="boxstop">На протяжении многих лет здесь идет война между людьми и магмарами. Два великих дракона стоят на страже интересов обеих рас. Нет силы, способной противостоять мощи гигантов, но когда приходит хаос, даже они не в силах сдерживать зыбкий баланс сил.</p>
   </body>
</html>

 

Результат: (открыть в браузере)

 
Загрузка...