Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Статьи по CSS » Статья по CSS 7. Использование обтекания (CSS Float)
Не нравится(-) 85 Нравится(+)
18-10-2008, 19:08 - GZ Design (Статьи по CSS)
Статья по CSS 7. Использование обтекания (CSS Float)

Здравствуйте уважаемые посетители Российской школы CSS! Наша очередная статья по CSS будет посвящена одному из самых важных атрибутов для бестабличной верстки – обтеканиям, или CSS Float…

Итак, начнем наше изучение этого вопроса.
Обтекание картинки текстом использовалось с самого начала формирования стандартов верстки. Позже – в CSS появился атрибут float, призванный обеспечить такую возможность. Всё казалось бы логичным, но это – не так, в чем Вы и убедитесь в этой статье.
Сам атрибут выглядит так:


  • float:left – обтекание по левому краю

  • float:right – обтекание по правому краю

  • float:none – нет обтекания (по умолчанию)



С использованием обтекания связано очень много искажений и проблем. Это, в первую очередь, связано с неинуитивностью самой концепции float в CSS. Тем не менее, атрибут помогает реализовать множество различных идей, многие из которых, просто не имеют другого исполнения.
Начну с перечисления сфер использования этого замечательного атрибута.


  • Обтекание фиксированного объекта другими объектами

  • Формирование колонок, заключенных в блоки

  • Принудительное выравнивание объекта по левому или правому краю родителя

  • Выделение блока (объекта) из основного потока (содержания)

  • Создание частей сложных конструкций



Теперь, надо разобраться в основных особенностях работы с float:


  • Объект со стилем float позиционируется по левому/правому краю, вне общего потока и игнорируя другие установки

  • Блоки с float игнорируются основным потоком. Например: при создании фона – их содержание не учитывается

  • Для обтекаемых объектов необходимо задавать ширину (любым способом). Крайне желательно задавать высоту (см. предыдущий пункт)

  • Разные браузеры по разному понимают простейшие операции с такими блоками. Особые проблемы возникают с устаревшими версиями IE

  • Блоки с атрибутом Float выравниваются по верхней границы элемента - родителя

  • Возможны проблемы с отображением ссылок внутри Float блоков.



Основная проблема при реальной верстке с помощью обтеканий – то, что блок с таким стилем как бы сжимается, не обращая никакого внимания на содержание. Решить эту проблему можно задав высоту блока, или задав фон с помощью самой страницы (стиль для html,body).
Для предотвращения наезда нижних элементов основного потока на блок с float, используют специальный атрибут – clear. Он имеет следующие варианты:


  • clear:none – нет контроля обтекания

  • clear:left – контроль обтекания по левому краю

  • clear:right – контроль обтекания по правому краю

  • clear:both – контроль обтекания по обоим краям


Атрибут clear чаще всего используется для создания «подвала».
Закончим на этом с теорией. Посмотрим, как можно сделать дизайн с float на практике.
Не будем далеко ходить за примером и возьмём шаблон персонального сайта из предыдущего материала школы CSS.
Напомню, что там мы делали дизайн с двумя колонками. Основа дизайна там – именно float. Итак, в html для этого мы записали такой код:
    <!-- Левая колонка -->
    <div id="leftcolumn">
    <h3>Мои друзья</h3>
    <div id="rcs"><a href="http://www.css-school.ru/">Российсая школа CSS</a></div>
    <div id="gzweb"><a href="http://www.gzweb.ru/">GZweb.ru</a></div>
    <div id="wallday"><a href="http://www.wallpapersday.ru/">Wallpapers Day</a></div>
        <hr />
           <h3>Интересные события</h3>
     <ul>
     <li><a href="/">Российская школа CSS оживилась</a></li>
     <li><a href="/">У GZweb.ru новый дизайн</a></li>
     <li><a href="/gall.html">Моя галерея</a></li>  
     </ul>
     <br /><br />
    </div>
    <!-- Конец левой колонки -->
    <!-- Основное содержание сайта -->
    <div id="rightcolumn">
      <h1>Мой дневник появился</h1>
      <img src="1.jpg"  alt="Мой дневник появился" /><br />
        Рад ссобщить Вам, что сегодня начал работать мой собственыый дневник!!!
   ;)
<div id="undernew">Я опубликовал этот материал <b>12 октября 2008 года</b>. Категория - <b>Новости дневника</b>.</div>
    </div>
    <!-- Конец основного содержания сайта -->


Без стилей, эти блоки располагались бы один под другим, но мы сейчас поправим это:

#leftcolumn {
background:#e7e7e7;
display: inline;
color: #333;
margin-right:10px;
padding:10px;
width: 246px;
height:auto;
[b] float: left;[/b]
border:2px solid #ddd;
}

#rightcolumn {
[b] float: right;[/b]
color: #333;
padding:0;
width: 680px;
display: inline;
position: relative;
text-align:center;
}


Сразу видно, что для левой колонки задано выравнивание по левому краю, а для правой – по правому.

Есть ещё один способ создания двух колонок. Для этого зададим правому столбцу отступ слева на ширину левого столбца (margin-left:250px;). Скажу сразу, что IE6 понимает это своеобразно и добавляет к расстоянию между блоками несколько пикселей.
Покажу этот важный момент на примере:

Попытаемся сделать простую структуру из двух колонок, но вместо float: right; для правой ставим margin-left:***px;
Вот код для html файла:
<!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>
Российская школа CSS. Использование Float.
</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="left">Левая колонка</div><div id="right">Правая колонка</div>
</body>
</html>

Вот – очень простой CSS для шаблона:
html,body {
   width:1000px;
   margin:0 auto;
   padding-top:10px;
}
    
#left {
   float:left;
   width:250px;
   background:#cbcbcb;
   border:3px solid #004167;
   height:300px;
   padding:10px;
}

#right {
   width:690px;
   background:#ffd97e;
   border:3px solid #004167;
   height:300px;
   padding:10px;
   margin-left:276px;
}

В Опере и подобных браузерах это будет выглядеть так:
Статья по CSS 7. Использование обтекания (CSS Float)

А в IE6 будет так:
Статья по CSS 7. Использование обтекания (CSS Float)

На рисунке ясно видно, что браузер добавил три пикселя между блоками, хотя по логике, их там не должно быть. Можно, конечно предположить, что это произошло из-за влияния границы и/или внутреннего отступа. Уберём их и посмотрим, что получится:
Статья по CSS 7. Использование обтекания (CSS Float)

Итак, простой манипуляцией со стилями исправить проблему не удалось. Зато, исправить её можно значительно проще. Добавим в html такой код:
<![if ! IE]>
<style>
#right {
     margin-left:280px;
}

Этот код значит, что для всех браузеров, кроме IE будет приниматься отступ в 280 пикселей. Соответственно в файл стилей пишем так: margin-left:277px;
Вот и всё. Проблема – решена.

Вот, кажется и всё что следует рассказать об атрибуте Float. Желаю Вам успешного его использования. Спасибо за внимание!


P.S. Форум снова начал работать. Там Вы всегда можете сделать заказ на написание тематической статьи, задать интересующий вопрос, поделится опытом, или просто пообщаться с коллегами. Так что, Добро пожаловать!



Автор: Григорий Загребельный, Российская школа CSS
-----------------------------------
Демо
Демо 1
Перейти в категорию статей по CSS


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 40019 раз(а) и написали 12 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!