CSS: свойство float

Технические моменты создания сайтов и других Web-приложений.

CSS: свойство float

Сообщение Александр » 29 окт 2013, 15:03

Данное свойство, задает элементу параметры, при которых последующие элементы начинают обтекать его с одной из сторон. Может принимать значения: left (остальные элементы будут обтекать его справа), right (остальные элементы будут обтекать его справа), none (обтекание не задается), inherit (обтекание задается по родительскому элементу).
Свойство float лучше всего применяется к текстам, картинкам и слоям, хотя возможно и иное применение.
Пример:
Код: выделить все
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Свойство float</title>
  <style>
   .sloi1 {
    float: left; /* Текст обтекает по правому краю */
    background: #cf3; /* Фоновый цвет */
    border: 2px dashed gray; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin-right: 35px; /* Отступ справа */
    width: 41%; /* Ширина блока */
   }
  </style>
 </head>
<body>
<div class="sloi1">
 Текст1  Текст1  Текст1  Текст1  Текст1  Текст1  Текст1  Текст1  Текст1  Текст1  Текст1  Текст1  Текст1  Текст1  Текст1  Текст1  Текст1  Текст1
</div>
  <div>
    <p>Текст обтекающий справа.  <br />
    Текст обтекающий справа.  <br />
    Текст обтекающий справа.  <br />
    Текст обтекающий справа.  <br />
    Текст обтекающий справа.  <br />
    Текст обтекающий справа. 
    </p>
</div>
</body>
</html>

Результат применения свойства float:
float.png
Применение свойства float
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 218
Зарегистрирован: 12 мар 2012, 16:32

Re: CSS: свойство float

Сообщение Root » 18 мар 2014, 05:54

Свойство float лучше всего применяется к текстам, картинкам и слоям, хотя возможно и иное применение.
Сейчас, когда дивная верстка вытеснила табличную, свойство float наиболее часто применяется к div блокам, без чего блоки было бы невозможно необходимое позиционирование блоков в шаблоне.

И, нужно сказать, очень коварное оно, это свойство. Я как-то чуть до нервного истощения не дошел, когда боролся с "косяком" шаблона в браузере IE. Получилось так, что форма ответа на определенный комментарий никак не хотела подниматься к этому самому комментарию, а упиралась в правый сайдбар (если нижняя граница сайдбара лежала ниже комментария), да так и оставалась на этом уровне. Долго искал причину и в конце концов нашел. Дело оказалось в свойстве float: right присвоенному списку выводимых под публикацией комментариев. Свойство передалось расположенному ниже блоку с формой ответа, и блок позиционировался так, как предписывало ему унаследованное свойство float: right. Вышел из положения тем, что в описании стилей для списка комментариев ввел свойство overflow со значением hidden, которое ограничило действие свойства right границами блока со списком комментариев, и не позволило другим элементам унаследовать его. После этого случая стараюсь следить за тем, чтобы действие свойства float ограничивалось тем блоком, которому оно назначено, чтобы не ломать голову над расползающейся непонятно почему версткой.
Аватар пользователя
Root
Продвинутый Юзер
 
Сообщений: 299
Зарегистрирован: 19 май 2013, 14:58


Вернуться в Программирование для Web

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron