Тег float: Свойство float – разъяснение как работает css свойство float / Habr

Leave a Comment / Разное / By /

float and clear CSS уроки для начинающих академия


Свойство CSS float указывает, как элемент должен плавать.

Свойство CSS clear указывает, какие элементы могут плавать рядом с очищенным элементом и с какой стороны.

Свойство float

Свойство float используется для позиционирования и компоновки на веб-страницах.

Свойство float может иметь одно из следующих значений:

  • left — Элемент плавает слева от контейнера
  • right — Элемент плавает справа от контейнера
  • none — Элемент не плавает (будет отображаться только там, где это происходит в тексте). Это значение по умолчанию
  • inherit — Элемент наследует значение float родительского элемента

In its simplest use, the float property can be used to wrap text around images.

Пример-float: вправо;

В следующем примере указывается, что изображение должно быть размещено в тексте справа :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac…

Пример

img {
    float: right;
}

Пример-float: левый;

В следующем примере показано, что изображение должно плавать в тексте слева :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac…

Пример

img {
    float: left;
}

Верстка без float’ов / Habr

Существует много разных способов css разметки. Некоторые базируются на абсолютном позиционировании, другие используют float’ы. Первый метод плохо поддерживает «резиновость» макета, тогда как второй это неплохой способ разметки.

Но, как и многие мощные инструменты, float’ы имеют свои изъяны. Для начала, верстка на основе float’ов не такая простая к пониманию, а также float’ы есть источником многих багов (в основном в ИЕ), что делает их не идеальным вариантом в погоне за кроссбраузерностью.

Итак, речь далее пойдет о семантически корректном методе верстки.

Начнем с обычной разметки (основанной на div’ах)

  Header
  Body
          Section 1
      Section 2
      Section 3
    
  
  Footer

Но div’ы не могут отобразить структуру документа, для этого семантически более подходят списки, потому как они, в отличие от div’ов передают иерархию и связи, которые присутствуют между элементами.

  1. Header
  2. Body
        
    1. Section 1
    2. Section 2
    3. Section 3

      
  3. Footer

Использование CSS стилей

Для «хороших» браузеров, все достаточно прозрачно.

* {margin:0;padding:0;}
#wp {width:55em;margin:0 auto;list-style-type:none;}
#bd {display:table;}
#doc {display:table-row;}
#s1,#s2,#s3 {display:table-cell;}

Стили для IE

В IE LI имеют значение display равным inline-block, поэтому:
1. Для IE Win используем {display: inline; zoom: 1}. «zoom:1» используется для того чтобы елементы имели hasLayout-свойство. (читайте наличие layout или на хабре Изучаем наличие layout)

2. Для IE Mac — {display:inline-block;float:left;}

Так же нам понадобятся еще несколько дополнительных правил:

  • vertical-align чтобы контент в LI прижимался к верху, а не к низу
  • width для каждого из LI

#s1,#s2,#s3,{display:inline;zoom:1;vertical-align:top;}
#s1 {width:12em;}
#s2 {width:29em;}
#s3 {width:14em;}
/*\*//*/
#s1,#s2,#s3 {display:inline-block;float:left;}
#ft {clear:left;}
/**/

Css-правила выше используют некоторые хаки, а именно:

  • IE (IE 7 и IE Mac включительно) не игнорирует правила, в которых запятая предшествует блоку объявлений
  • IE5 Mac <a href=«www.stopdesign.com/examples/ie5mac-bpf» title«фильтр»>фильтр

Так как IE 5.1 имеет баги с математическими рассчетами, то нужно уменьшить ширину первого столбца, поэтому используем <a href=«tjkdesign.com/articles/conditional_comments.asp» title«условные комментарии»>условные комментарии с условием «if lt IE 5.5000»


По сути на этом все… Далее в статье автор рассказывает как добавить границы, а также указывает на разницу в правилах для фиксированной и резиновой верстки.

Метод достаточно интересный, если отбросить поддержку морально устаревших браузеров, таких как IE5.5 и меньше, то правил станет значительно меньше. Этот метод позволяет просто и без забот решить проблему, когда нужно расстянуть float-блок (скорее всего боковой блок), чтобы он был равен главному по высоте (к примеру, если фон нужно расстянуть).

Ниже привожу ссылки с примерами разных разметок:
Фиксированная в пикселях: 210, 400, 190
<a href=«tjkdesign.com/articles/css-layout/?6» title»»>Резиновая в %: 20, 60, 20 с мин/макс шириной (800px/1200px)

<a href=«tjkdesign.com/articles/css-layout/?7» title»»>Резиновая в %: 20, 60, 20

Фиксированная ширина, использование float | htmlbook.ru

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

Принцип создания двухколонного макета на основе этого свойства следующий. Добавляем float со значением left к слоям, формирующим колонки, а также устанавливаем у них ширину через свойство width. Все, слои будут располагаться рядом по горизонтали (пример 1).

Пример 1. Использование float

XHTML 1.0CSS 2.1IECrOpSaFx

<!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" />
  <title>Две колонки</title>
  <style type="text/css">
   #leftcol {
    float: left;
    background: #f0f0f0;
    width: 600px;
   }
   #rightcol {
    float: left;
    background: #fc0;
    width: 200px;
   }
  </style>
 </head>
 <body>
  <div>Левая колонка</div>
  <div>Правая колонка</div>
 </body>
</html>

Несмотря на видимую простоту, нас поджидает несколько подводных камней. Во-первых, при уменьшении окна браузера на ширину, меньше суммарной ширины слоев, правая колонка «перескакивает» вниз. Во-вторых, после слоев продолжает действовать свойство float, поэтому текст будет отображаться не под колонками, как нам требуется, а рядом с ними. От этих недостатков избавит добавление слоя с именем container, внутри которых и будут располагаться остальные слои, а также использование свойства clear (пример 2).

Пример 2. Модификация кода

XHTML 1.0CSS 2.1IECrOpSaFx

<!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" />
  <title>Две колонки</title>
  <style type="text/css">
   #container {
    width: 800px; /* Общая ширина макета */
    margin: 0 auto; /* Выравниваем по центру */
   }
   #leftcol {
    float: left;
    background: #f0f0f0;
    width: 600px;
   }
   #rightcol {
    float: left;
    background: #fc0;
    width: 200px;
   }
   .clear {
    clear: left;
   }
  </style>
 </head>
 <body>
  <div>
    <div>Левая колонка</div>
    <div>Правая колонка</div>
    <div></div>
    <p>Текст</p>
  </div>
 </body>
</html>

Применение свойства float для создания двухколонночного макета продемонстрировано в примере 3. Модифицируя значения полей (padding) и границ (border), помните, что они влияют на ширину слоя.

Пример 3. Создание макета с двумя колонками

XHTML 1.0CSS 2.1IECrOpSaFx

<!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" />
  <title>Рецепты от Миранды</title>
  <style type="text/css">
   body {
    font: 10pt Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
    background: #54463d; /* Цвет фона */
    margin: 0; /* Убираем отступы */
   }
   h3 {
    font-size: 1.1em; /* Размер шрифта */
    color: #752641; /* Цвет текста */
    margin-bottom: 0; /* Отступ снизу */
   }
   #container {
    width: 500px; /* Ширина макета */
    margin: 0 auto; /* Выравниваем по центру */
    background: #f0f0f0; /* Цвет фона правой колонки */ 
   }
   #header {
    background: #8fa09b; /* Цвет фона */
    font-size: 24pt; /* Размер текста */
    font-weight: bold; /* Жирное начертание */
    color: #edeed5; /* Цвет текста */
    padding: 5px; /* Отступы вокруг текста */
   }
   #content {
    float: left; /* Обтекание по правому краю */
    width: 329px; /* Ширина левой колонки */
    padding: 10px; /* Поля вокруг текста */
    border-right: 1px dashed #183533; /* Линия справа */
    background: #fff; /* Цвет фона левой колонки */
   }
   #content p {
    margin-top: 0.3em /* Отступ сверху */
   }
   #sidebar {
    float: left; /* Обтекание по правому краю */
    width: 120px; /* Ширина */
    padding: 10px; /* Отступы вокруг текста */
   }
   #footer {
    background: #8fa09b; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 5px; /* Отступы вокруг текста */
   }
   .clear { 
    clear: both; /* Отмена обтекания */ 
   }
  </style>
 </head>
 <body>
  <div>
   <div>Рецепты от Миранды</div>
   <div>
    <h3>Рома!</h3>
    <p>Очистить от ядрышек 2 кг. грецких орехов. Растолочь скорлупу и смешать с фруктами
    в 2 литрах рома. Употреблять 3–4 раза в день.</p>
    <h3>Кровавая Мери</h3>
    <p>Влить в бокал хорошую 100% кровь по лезвию ножа. Влить водку &laquo;Смирновскую&raquo;.
    Пить залпом.</p>
    <h3>Грог по-рыбацки</h3>
    <p>1 рыбу залить кипятком, через 5 минут процедить и добавить грога. Подавать в чашках.</p>
    <h3>Хвангур</h3>
    <p>Сварить на медленном огне воду. Добавить в нее хлива и хрольва. Довести до кипения.</p>
    <h3>Царская водка</h3>
    <p>Смешать 2 части соляной кислоты и 1 часть азотной со льдом. Слить охлажденную смесь 
    в фужер. Пить залпом.</p>
    <h3>HotDog</h3>
    <p>Тщательно промойте косточки и сварите из них бульон. Подавать горячим.</p>
    <h3>Fireball</h3>
    <p>В большой бокал положить лед, вылить на него все компоненты и положить кружок лимона.</p>
   </div>
   <div>
    <p><a href="popular.html">Популярные рецепты</a></p>
    <p><a href="day.html">Рецепт дня</a></p>
    <p><a href="apple.html">Рецепты на основе яблок</a></p>
    <p><a href="ice.html">Рецепты на основе льда</a></p>
    <p><a href="hliv.html">Рецепты из хлива и хрольва</a></p>
   </div>
   <div></div>
   <div>&copy; Влад Мержевич</div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Макет с двумя колонками

Удобство использования float состоит еще в том, что если для слоя sidebar поставить float: right вместо значения left, то колонки поменяются местами без дополнительной модификации кода.

Также приведем код для тех, кто любит HTML 5. Для браузера Internet Explorer, чтобы он понимал стиль для новых элементов, придется включить специальный скрипт через условные комментарии.

Пример 4. Код HTML5

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рецепты от Миранды</title>
  <link href="style/layout03.css" rel="stylesheet">
  <!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
 </head>
 <body>
  <div>
   <header><h2>Рецепты от Миранды</h2></header>
   <article>
    <h3>Рома!</h3>
    <p>Очистить от ядрышек 2 кг. грецких орехов. Растолочь скорлупу и смешать с фруктами
    в 2 литрах рома. Употреблять 3–4 раза в день.</p>
    <h3>Кровавая Мери</h3>
    <p>Влить в бокал хорошую 100% кровь по лезвию ножа. Влить водку &laquo;Смирновскую&raquo;.
    Пить залпом.</p>
    <h3>Грог по-рыбацки</h3>
    <p>1 рыбу залить кипятком, через 5 минут процедить и добавить грога. Подавать в чашках.</p>
    <h3>Хвангур</h3>
    <p>Сварить на медленном огне воду. Добавить в нее хлива и хрольва. Довести до кипения.</p>
    <h3>Царская водка</h3>
    <p>Смешать 2 части соляной кислоты и 1 часть азотной со льдом. Слить охлажденную смесь 
    в фужер. Пить залпом.</p>
    <h3>HotDog</h3>
    <p>Тщательно промойте косточки и сварите из них бульон. Подавать горячим.</p>
    <h3>Fireball</h3>
    <p>В большой бокал положить лед, вылить на него все компоненты и положить кружок лимона.</p>
   </article>
   <nav>
    <p><a href="popular.html">Популярные рецепты</a></p>
    <p><a href="day.html">Рецепт дня</a></p>
    <p><a href="apple.html">Рецепты на основе яблок</a></p>
    <p><a href="ice.html">Рецепты на основе льда</a></p>
    <p><a href="hliv.html">Рецепты из хлива и хрольва</a></p>
   </nav>
   <div></div>
   <footer>&copy; Влад Мержевич</footer>
  </div>
 </body>
</html>

div теги-float атрибут — CodeRoad

Я новичок в тегах div, так как ранее я использовал таблицы. Я хотел бы отобразить метку и текстовое поле, например: First Name: _ _ _ _ _ _ _ для этого я написал так

<div>
<div>firstName</div><div><asp:textbox runat="server"/></div></div>.

Я думаю, что создает один раздел, не так ли ? Я не понимаю, как атрибут float принимает управление textbox в первую строку вместо второй строки. просьба уточнить !

html runatserver

Поделиться Источник dotnetrocks     21 октября 2011 в 14:21

1 Ответ


1

вы можете назначить как метку, так и поле ввода ID, а затем установить оба значения в float:left.

любить:

<label for="input1">Name:</label>

или если вы разместили их в отдельных дивах,то назначьте этим дивам ID и плавайте по ним.

Поделиться Victor     21 октября 2011 в 14:24

Похожие вопросы:


Какие теги HTML поддерживают атрибут name?

Все ли теги HTML поддерживают атрибут name или есть только несколько, на которых можно использовать атрибут name? Кроме того, все ли теги поддерживают атрибут title? Причина, по которой я спрашиваю,…


Почему атрибут ‘float’ css влияет на родительский сиблинг div?

У меня есть этот простой код html, я хочу знать, почему на родительский братский div влияет float css arrtibute. Является ли float относительно окна не блоком, в котором находится элемент с float…


теги div не выровнены должным образом

Я получаю странную проблему с тегами div на самом деле эти теги div выровнены и сгруппированы в одном контейнере но проблема что то действительно глупое вот мой код <html> <head>…


почему float не работает в этом примере, когда один из <div> используется без использования атрибута float?

почему div3 не показывает зеленый цвет, который я определяю?? <div style=width:100px;height:100px;background-color:#ffff00;float:left> div1 </div> <div…


dir=атрибут auto не работает при применении к тегу div

Я применил атрибут dir=auto к элементу <div> , чтобы получить выравнивание текста на основе языка ввода. Но если какой-либо <p> tag присутствует внутри <div> , то атрибут dir=auto…


Выравнивание три пролета/div-теги — исправлено слева, закреплено право, заполните середину

Ладно, это сводит меня с ума!! Я хочу три div или span теги в строке. Слева = изображение шириной 57px; справа = изображение шириной 57px; в центре = изображение диапазона для заполнения всей…


jQuery не выбраны все теги div

Когда я запускаю этот код, выбирается только первый div и только первый второй тег p(который содержит Greetings) пуст, но оставляет другие вторые теги p в двух других divs без изменений. Я хочу,…


Div Теги перекрываются в нефрите

Jade file ====== doctype html html head title= title link(rel=’stylesheet’, href=’/stylesheets/style.css’) body div(id=topBar) h2(id=title) title form(id =loginForm,name=input,…


Удалить теги <div> и _27

У меня есть следующий фрагмент кода HTML. <ul class=system_messages> <li class=green> <span class=ico></span> <strong class=system_title> <div class=ui-widget…


Использование свойств div float & margin

Я пытаюсь поместить рекламу в свой пост блоггера & я хочу, чтобы мои данные были обернуты вокруг объявлений. Я использую следующий код, чтобы это произошло. Экс. Желаемый результат. . <div…


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *