Подробно о свойстве float / Хабр
Правильное использование CSS свойства float может стать непростой задачей даже для опытного верстальщика. В этой статье собраны варианты применения float, а также некоторые ошибки, с наглядными примерами.Что такое float?
Некоторые элементы в CSS являются блочными и поэтому начинаются с новой строки. Например, если расположить два абзаца с тегами P, то они будут находиться друг под другом. Другие же элементы являются «строчными», т.е. отображаются на странице в одну строку.
Один из способов переназначить элементам тип обтекания — это использование свойства float. Классический пример — использование float для выравнивания картинки по левому или правому краю. Вот простой HTML-код картинки и абзаца:
<img src="http://lorempixum.com/200/200/" />
<p>Lorem ipsum...</p>
Они отображаются с новой строки:
Добавляем немного CSS картинке:
img {
float: right;
margin: 20px;
}
Если текста больше, то абзац будет обтекать картинку:
Допустим, нам нужно сделать отступ в 20 пикселей между картинкой и текстом. Вот такая конструкция работать не будет:
p {margin: 20px;}
Правильно вот так:
img {margin: 20px;}
Почему же не работает отступ для абзаца? Чтобы разобраться, добавим рамку:
p {
border: solid 1px black;
}
Результат может вас удивить:
Оказывается, картинка находится внутри абзаца! Поэтому и не работает свойство margin в первом случае. Чтобы исправить это, можно применить float:left к абзацу и указываем абсолютную ширину:
img {
float: right;
margin: 20px;
}
p {
float: left;
width: 220px;
margin: 20px;
}
Странные правила float
Перейдем к более сложным вариантам использования float: к правилам, регулирующим плавающие объекты. Это бывает необходимо при верстке галереи изображений. Например:
<ul>
<li><img src="1450823466601083332032"/></li>
<li><img src="http://placehold.it/100x150&text=2"/></li>
<li><img src="1450823466394721548724"/></li>
<li><img src="1450823466376067888878"/></li>
<li><img src="1450823466279266032276"/></li>
<li><img src="http://placehold.it/100x150&text=6"/></li>
<li><img src="http://placehold.it/100x100&text=7"/></li>
</ul>
По умолчанию каждый элемент списка появится с новой строки. Если применить к каждому float:left, изображения встанут в один ряд с переносом строки:
li {
float: left;
margin: 4px;
}
Но что, если изображения разной высоты?
Если мы добавим элементам списка отображение в одну строку, получится немного симпатичнее:
li { display: inline; }
А теперь выравниваем по вертикали:
img {
vertical-align: top;
}
Следует помнить, что в случае большей высоты картинок, остальные изображения обтекают только одно предыдущее, например:
Пример изменения очередности элементов — например, у нас есть список элементов по порядку:
<ul>
<li><img src="1450823466601083332032"/></li>
<li><img src="http://placehold.it/100x100&text=2"/></li>
<li><img src="1450823466394721548724"/></li>
<li><img src="1450823466376067888878"/></li>
<li><img src="1450823466279266032276"/></li>
<li><img src="http://placehold.it/100x100&text=6"/></li>
</ul>
Если мы хотим расположить их в обратном порядке, просто применяем float:right вместо float:left, и не придется менять порядок в HTML:
С помощью float удобно группировать элементы на странице, но большой проблемой становится то, что последующие элементы (текст или блок) также получают свойство обтекания. Например, у нас есть блок картинок:
Текст под ним начинает обтекать весь блок:
Чтобы избежать этого, необходимо использовать свойство clear. Если применим его ко второму изображению:
ul li:nth-child(2) {
clear: left;
}
Получим вот, что:
В этом случае остальные изображения продолжают наследовать float:left. Соответсвенно текст будет отображаться коряво:
Нужно применить clear:both к абзацу:
p {
clear: both;
}
Наша проблема решена:
Теперь предположим, что нам необходимо установить фон для галереи из предыдущих примеров. Если бы элементы были не плавающими, то получилось бы вот, что:
ul {
background: gray;
}
Но если элементам списка применить float:left, фон совсем пропадает:
Если мы сначала устанавливаем высоту для UL:
ul {
height: 300px;
}
Это тоже не решает проблему, т.к. размеры фона заданы абсолютно. Нам поможет класс clearfix, который будет применен к div на том же уровне, что и элементы UL.
.clearfix {
clear: both;
}
Существует еще одно решение, с использованием overflow:
ul {
overflow: auto;
}
Девять правил float-элементов:
- Плавающие элементы не могут выходить за край своего контейнера-родителя.
- Каждый плавающий элемент будет отображаться справа или ниже от предыдущего при float:left, либо слева и ниже, при float:right.
- Блок с float:left не может быть правее, чем блок с float:right.
- Плавающий элемент не может выходить за пределы верхней границы своего контейнера.
- Плавающий элемент не может располагаться выше, чем родительский блок или предыдущий плавающий элемент.
- Плавающий элемент не может располагаться выше, чем предыдущая строка inline-элементов
- Плавающий блок должен быть расположен как можно выше.
- Один плавающий элемент, следующий за другим, не может выходить за пределы своего контейнера — происходит перенос на следующую строку.
- Блок с float:left должен быть расположен как можно левее, а с float:right — как можно правее.
float | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам (за исключением абсолютно позиционированных) |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-float |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Синтаксис
float: left | right | none | inherit
Значения
- left
- Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
- right
- Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
- none
- Обтекание элемента не задается.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS 2.1IE 9Cr 15Op 11Sa 5Fx 8
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>float</title> <style> .layer1 { float: left; /* Обтекание по правому краю */ background: #fd0; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ padding: 10px; /* Поля вокруг текста */ margin-right: 20px; /* Отступ справа */ width: 40%; /* Ширина блока */ } </style> </head> <body> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <div> Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. </div> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства float
Объектная модель
[window.]document.getElementById(«elementID»).style.styleFloat
[window.]document.getElementById(«elementID»).style.cssFloat
Браузеры
В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Свойство float CSS
Пару лет назад, когда разработчики впервые начали переходить к HTML-разметке без таблиц, CSS свойство float внезапно взяло на себя очень важную роль. Причина того, что свойство float стало так распространено, состояла в том, что по умолчанию, блочные элементы не выстраивались в линию рядом друг с другом в формате на основе столбца. Так как столбцы необходимы фактически в каждой схеме CSS, к этому свойству начали привыкать — и даже злоупотреблять им.
Свойство float в CSS, позволяет разработчику включать подобные таблице столбцы в разметку HTML без использования таблиц. Если бы не свойство float, то схемы размещения CSS не были бы возможны, кроме использования абсолютного и относительного позиционирования — которые были бы неаккуратными и сделали бы схему разметки неудобной в сопровождении.
В этой статье мы расскажем, что такое свойство float и как оно влияет на элементы в специфических контекстах. Мы также обратим внимание на некоторые из различий, которые могут возникнуть в связи с этим свойством в наиболее часто используемых браузерах. Наконец, мы продемонстрируем несколько практических применений свойства float. Это должно обеспечить также всестороннее и тщательное обсуждение этого свойства и его влияние на развитие CSS.
Определение и синтаксис CSS-свойства Float
Цель свойства float состоит в том, чтобы, вытолкнуть блочный элемент влево или вправо, взяв его из потока документа. Это позволяет естественным образом текущему информационному содержанию обвалакиваться вокруг плавающего элемента. Эта концепция является аналогичной той, которую вы видите каждый день в печатной литературе, где фотографии и другие графические элементы, выровненные по какой либо стороне, а информационное наполнение (обычно текст) течет естественно вокруг элемента выровненного вокруг левого или правого края.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееНа изображении выше раздел “Читатели сайта ”.net magazine с 3-мя фотографиями читателей, которые выровнены по левому краю в своих столбцах с обертыванием текста вокруг изображений. Такова — основная идея, лежащая в основе свойства float в схемах размещения CSS, и она демонстрирует один из способов, который использован в табличном дизайне.
Эффективность использования float в многоколонной верстке была объяснена Douglas Bowman в 2004 в его классической презентации No More Tables:
Bowman объяснил принципы, лежащие в верстке без таблиц, используя старый сайт Microsoft в качестве образца. Float были заметно использованы в его ложной перестройке разметки Microsoft.
Синтаксис
Свойство Float может принимать одно из 4 значений: влево (left), вправо(right), без выравнивания (none) и наследованное (inherit). Это объявляется, как показано в коде ниже:
#sidebar { float: left; }
Наиболее часто используемые значения это влево и вправо. Значение none или первоначальное значение float для какого-либо элемента HTML-страницы являются значением по умолчанию. Значение inherit (наследовать), к которому может быть применено почти к каждому свойству CSS, не работает в версиях Internet Explorer, включая 7.
Свойство float не требует применения любого другого свойства для элемента с float, однако, чтобы функционировать правильно, float будет работать более эффективно при определенных обстоятельствах.
Как правило, плавающий элемент должен иметь явно установленную ширину (если это не replaced element, например изображение). Это гарантирует, что float ведет себя как ожидалось и помогает избежать проблем в некоторых браузерах.
#sidebar { float: left; width: 350px; }
#sidebar { float: left; width: 350px; } |
Особенности плавающих элементов
Ниже приводится список поведение плавающих элементов, согласно спецификации CSS2:
left-floated блок будет смещен влево до его левого края (или границы края, если край отсутствует) касается или края содержания блока, или края другого floated блока
Если размер floated блока превышает доступное горизонтальное пространство, то floated блок будет сдвинут вниз
Non-positioned, non-floated блочные элементы действуют, как плавающие элементы, т.е. находится вне потока документа
Края floated блока не совпадут с краями смежных блоков
Корневой элемент(<html>) не может быть floated
Встроенный элемент, тот который floated, преобразуется в элемент блочного типа
Float на практике
Наиболее часто используемым вариантом использования свойства float является плавающее изображение с текстом, обертывающим его. Например:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
CSS, применяемая к изображению в поле выше выглядит следующим образом:
img { float: left; margin: 0 15px 5px 0; border: solid 1px #bbb; }
img { float: left; margin: 0 15px 5px 0; border: solid 1px #bbb; } |
Единственное свойство, которое может добиться такого эффекта работы это свойство float. Другие свойства (margin и border) есть там по эстетическим причинам. Другие элементы в блоке (тэги <p> с текстом в них) не нуждаются ни в каких стилях.
Как упомянуто ранее, floated элементы выбиваются из потока документа, а другие блочные элементы остаются в потоке, действуя, так если бы floated элемент там даже не находятся. Это продемонстрировано визуально ниже:
This <p> element has a different background color to show that it spans the width of its parent, ignoring the floated element. This inline text, however, wraps around the floated box.
В приведенном выше примере<p>элемент уровня блока, таким образом он игнорирует floated элемент, охватывающий ширину контейнера (за вычетом padding). Все элементы не floated, блочного типа будут вести себя аналогично.
Текст в абзаце является встроенным, поэтому он обволакивает floated элемент. Floated блоку также предоставляются параметры margin, чтобы сместить его из абзаца, делая его визуально чистым, чтобы элемент абзаца игнорировал floated блок.
Очистка floats
Проблемы расположения с floats обычно решаются использованием CSS свойства clear, которое позволяет вам “убрать” floated элементы с левой или правой или с обеих сторон.
Давайте рассмотрим пример, который часто встречается — нижний колонтитул (footer) обтекает правую сторону 2-ух клоночной разметки:
Right column also floated left
Если вы посмотрите на страницу IE6 и IE7, вы не увидите никаких проблем. Левые и правые столбцы на месте, и нижний колонтитул внизу. Но в Firefox, Опере, Safari и Chrome, вы увидеть, что нижний колонтитул (footer) съезжает со своего места. Это вызвано приминением float к столбцам. Это правильное поведение, хотя оно является более проблемным. Чтобы решить эту проблему, мы используем вышеупомянутое clear свойство, относительно нижнего колонтитула:
Результат показан ниже:
Right column also floated left
The clear property will clear only floated elements, so applying clear: both to both columns would not cause the footer to drop down, because the footer is not a floated element.
Свойство clear очистит только floated элементы. Применение clear таково: оба столбца не будут опускать нижний колонтитул, потому что он не floated элемент.
Поэтому пользуйтесь clear на не- floated элементах, и даже иногда на floated элементах, чтобы заставить элементы страницы занять свои отведенные места.
Фиксация Выпадания родителя
Один из самых общих признаков разметки с float, является “выпадение — родителя”. Это продемонстрировано в примере ниже:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.Обратите внимание, что основание floated изображения появляется вне своего родителя. Родитель полностью не расширяется, для содержания floated изображение. Это вызвано тем, что мы обсуждали ранее: floated элемент вне естественного потока документа, хотя все элементы блока отображаются, но floated элемента там как бы нет. Это не ошибка CSS, всё в соответствии со спецификациями CSS. Все браузеры делают то же в этом примере. Нужно сказать, что, в этом примере, добавляя ширину контейнера можно предотвратить проблему в IE, но нужно рештиь проблему и для Firefox, Opera, Safari, или Chrome.
Решение 1:Float для контейнера
Самый простой способ решения этой проблемы является float для родительского элемента:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.Теперь контейнер расширяется, чтобы уместить все дочерние элементы. Но к сожалению, это исправление будет работать только в ограниченном числе случаев, поскольку floating родитель может повлечь нежелательные последствия для вашего макета.
Решение 2: Добавление Дополнительной Разметки
Это — устаревший метод, но это простой вариант. Просто добавьте дополнительный элемент в нижнюю часть контейнера и «очистите» его. Вот как HTML-код будет выглядеть после реализации этого метода:
<div> <img src=»//media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/lifesaver.jpg» alt=»» /> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> <div></div> </div>
<div> <img src=»//media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/lifesaver.jpg» alt=»» /> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> <div></div> </div> |
И в результате CSS применяется к новым элементам:
.clearfix { clear: both; }
.clearfix { clear: both; } |
Вы также можете сделать это посредством <br/> тэг с действующим стилем. В любом случае, вы получите желаемый результат: родительский контейнер расширится, чтобы включить все его дочерние элементы. Но этот метод не рекомендуется, так как он добавляет несемантический код к Вашей разметке.
Решение 3: Псевдо-элемент after
:after псевдо-элемент добавляет некий элемент к выполненной странице HTML. Этот метод использовался весьма широко, чтобы решить проблемы float-clearing. Вот как выглядит CSS:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее.clearfix:after { content: «.»; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:after { content: «.»; display: block; height: 0; clear: both; visibility: hidden; } |
Класс CSS “clearfix” применяем к любому контейнеру, который имеет дочерние элементы с float и не расширяется, чтобы включить их.
Но этот метод не работает для Internet Explorer до7 версии, поэтому для IE нужно применить один из следующих вариантов:
.clearfix { display: inline-block; } .clearfix { zoom: 1; }
.clearfix { display: inline-block; }
.clearfix { zoom: 1; } |
В зависимости от типа проблемы вы имеете дело с одним из двух решений, которые разрешат эту проблему в Internet Explorer. Следует отметить, что свойство zoom не является стандартом свойств Microsoft и поэтому ваш CSS станет не валидным.
Так, как псевдо — элемент :after не работает в IE6/7, получаем немного раздутый и мудрёный код, и требуется дополнительный недопустимый только для IE стиль, поэтому это решение не является лучшим способом, но вероятно, лучшее, из тех, что мы рассматривали до сих пор.
Решение 4: Свойство Overflow
Безусловно, лучший и самый простой способ решить проблему с выпадением родителя добавить overflow: hidden или overflow: auto к родительскому элементу. Это ясно, легко поддерживается, работает почти во всех браузерах и не добавляет лишней разметки.
Заметьте, что я сказал «почти» во всех браузерах. Это объясняется тем, что он не работает в IE6. Но, во многих случаях, у родительского контейнера будет установленная ширина, которая устраняет проблему в IE6. Если у родительского контейнера нет ширины, Вы можете добавить IE6-единственный стиль со следующим кодом:
// This fix is for IE6 only .clearfix { height: 1%; overflow: visible; }
// This fix is for IE6 only .clearfix { height: 1%; overflow: visible; } |
В IE6, свойство height неправильно рассматривать как min-height, таким образом, это вынуждает контейнер включить свои дочерние элементы. Свойство Overflow затем устанавливается обратно в “visible”, чтобы гарантировать, что содержимое не скрыто или пролистано.
Единственный недостаток в использовании overflow метода (в любом браузере) является возможность того, что содержание элемента будет иметь полосы прокрутки или скроет информационное наполнение. Если есть какие-нибудь элементы с отрицательными margin или с абсолютным позиционированием в родителе, то они будут скрыты, если они выходят за пределы родителя, поэтому этот метод следует использовать осторожно. Нужно также отметить что, если бы у содержащегося элемента была бы указанная height или min-height, то Вы определенно не смогли бы использовать метод overflow.
Таким образом, на самом деле не просто кроссбраузерно решить данную проблему. Но практически любая проблема очистки float может быть решена одним из вышеупомянутых методов.
Связанные float ошибки в Internet Explorer
За эти годы имели место многочисленные статьи, опубликованные в сети, обсуждающие общие ошибки, связанные с float в CSS разметке. Все они, что не удивительно, имеют дело с проблемами характерными для Internet Explorer. Ниже, Вы найдете список ссылок на ряд статей, которые обсуждают связанные с float проблемы:
Изменение cвойства float при помощи JavaScript
Чтобы изменить значение CSS в JavaScript, вы должны получить доступ к стилю объекта, преобразовывая намеченное свойство CSS в «Camel case” Например, свойство CSS “margin-left” становится marginLeft, свойство background-color становится BackgroundColor, и так далее. Но со свойством float, всё по другому, потому что слово float уже зарезервированно в JavaScript. Поэтому следующее будет неправильным:
myDiv.style.float = «left»;
myDiv.style.float = «left»; |
Вместо этого, вы должны использовать одно из следующих действий:
// For Internet Explorer myDiv.style.styleFloat = «left»; // For all other browsers myDiv.style.cssFloat = «left»;
// For Internet Explorer myDiv.style.styleFloat = «left»;
// For all other browsers myDiv.style.cssFloat = «left»; |
Практическое использование Float
Floats могут быть использованы для решения целого ряда задач в CSS разметке. Некоторые примеры описаны здесь.
2-колонки, фиксированной ширины
Roger Johansson в 456 Berea Stree излагает 8 учебных шагов для создания простого кроссбраузерного, горизонтального центрирования 2-столбцов. Свойство float является составной частью расположения этой разметки.
“Разметка состоит из заголовка, горизонтальной навигационной панели, столбца основного содержания, бокового и нижнего колонтитула. Всё это также горизонтально по центру в окне браузера. Довольно типичный макет и его вовсе не трудно создать с помощью CSS после того, как вы знаете, как бороться с неизбежными ошибками Internet Explorer»
Простой макет CSS на 2 столбца
3 столбца, Схема размещения Равной высоты
Petr Stanicek с pixy.cz демонстрирует разметку из 3 столбцов кроссбраузерна, опять-таки используя float:
“Никаких таблиц, никакого абсолютного позиционирования (никакого позиционирования вообще), никакой нудной работы (!),одинаковая высота всех столбцов Левая и правая колонки фиксированной ширины (150px), средняя — тянется.»
Схема размещения на 3 столбца с CSS
Floated изображение с заголовоком.
Подобно тому, что мы обсуждали ранее в рамках «Float на практике», Max Design описывает, как float изображение с заголовком, позволяет тексту обернуться вокруг него естественно.
Плавающие Изображение и Заголовок
Горизонтальная навигация с неупорядоченными списками
Свойство float — ключевой компонент в кодировании основанных на спрайте горизонтальных навигационных панелей. Chris Spooner из Line25 описывается создание Menu of Awesomeness, в котором теги <li>, удерживающие кнопки навигации, используют float: left:
Как создать меню CSS с помощью спрайт изображения
Чтобы продемонстрировать важность свойства float в этом примере, вот, скриншот того же самого изображения после использования firebug для удаления the float: left:
Grid-Based фото галереи
Простое использование свойства float это float:left серии фотографий, содержащихся в неупорядоченном списке, которое получает тот же самый результат как, что Вы могли бы увидеть в табличной разметке.
Страница продуктов Foremost Canada’s (см. изображение выше) отображает свои продукты в формате сетки, рядом с боковой колонкой. Фотографии отображаются в виде неупорядоченного списка со свойством float, для всех <li> элементов установлено float: left. Это работает лучше, чем на табличная сетка, поскольку число фотографий в галерее может измениться, и разметка не будет затронута.
На Paragon Furniture’s futons page (см. изображение выше) другой пример страницы продуктов, где используется неупорядоченный список с floated тегами <li>.
На iStockphoto’s search results page (см. изображение выше) таже сетка, структурированных фотографий, здесь фотографии содержат float:left <div> теги, а не <li> теги.
Выравнивание <input> поля с кнопкой
Моделирование по умолчанию элементов формы для различных браузеров может быть проблематичным. Часто в одном поле формы, таком как форма поиска, необходимо поставить <input> элемент рядом с кнопкой “отправления”.
В любом браузере, результат один и тот же: кнопка немного выше, чем поле ввода. Изменение margin и padding ничего не дают. Простым решение является установить плавающее поле ввода слева и добавить маленький margin справа. Вот результат:
Заключение
Как было упомянуто в начале, без свойства float, табличное расположение будет, в худшем случае, невозможно, а, в лучшем случае неудобно в сопровождении. Float будет и впредь занимать видное место в макетах CSS, даже CSS3 начинает завоевывать известность – несмотря на то, что были дискуссии о разметке без использования floats.
Надеемся, что это обсуждение разъяснило некоторые тайны, связанные с float в CSS, и показало некоторые практические решения ряда проблем, с которыми сталкиваются разработчики CSS сегодня.
Автор: Louis Lazaris
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Источник: http://www.smashingmagazine.com
E-mail: [email protected]
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
СмотретьВсё о свойстве float | CSS-Tricks по-русски
Всё о свойстве float
Что такое «float»?
Float — это свойство CSS для позиционирования элементов. Для того чтобы понять его назначение и происхождение, можно обратиться к полиграфическому дизайну. В компоновке при печати, изображения могут располагаться на странице так, чтобы текст «обтекал» их. Обычно это так и называется: «обтекание текстом».
В программах для вёрстки страниц, элементы с текстом, могут учитывать изображения, а также и игнорировать их. В случае если они будут проигнорированы, текст будет отображаться над картинками, как будто их и нет. Это главная разница между тем, являются ли изображения частью основного потока страницы, или нет. Веб-дизайн очень похож.
В веб-дизайне, элементы страницы с установленным свойством float, ведут себя точно также как и изображения в полиграфии, когда текст «обтекает» их. Такие элементы являются частью основного потока веб-страницы. Однако всё обстоит иначе, если элементы используют абсолютное позиционирование. Абсолютно позиционированные элементы удаляются из основного потока страницы, подобно примеру выше, когда в полиграфии текст игнорирует изображения. Такие элементы не влияют на позицию остальных элементов, соприкасаются они или нет.
Установка свойства float происходит следующим образом:
#sidebar {
float : right;
}Всего есть 4 значения для свойства float. Left и right используются для соответствующих направлений. None (по умолчанию) — обеспечивает, что элемент не будет «плавать». И inherit, которое говорит, что поведение должно быть такое же, как и у родительского элемента.
Для чего можно использовать float?
Помимо обтекания текстом изображений, float может использоваться для создания макета всего сайта.
Свойство float также полезно и в меньших масштабах. Для примера рассмотрим маленькую область на странице сайта. Допустим вы используете float для аватара, при изменении размера изображения, размер текста будет подогнан в соответствии с изображением.
Такое же расположение объектов может быть достигнуто путём использования позиционирования. Объекту-контейнеру присваивается относительное (relative) позиционирование, а объекту с изображением — абсолютное (absolute). В этом случае аватар не повлияет на положение текста.
Отмена свойства float
Для float, родственное свойство — clear. Любой элемент, у которого установлено свойство clear, не будет поднят вверх, как от него ожидается, а отобразится ниже, после float-элементов. Возможно, пример на картинке объяснит лучше, чем слова.
В примере, сайд-бар прижат к правому краю (float: right;), а его высота меньше, чем область основного контента. Поэтому footer будет поднят выше, поскольку для него хватает высоты и этого требует поведение float. Чтобы исправить ситуацию, ему необходимо установить свойство clear, которое гарантирует, что элемент выведется ниже float-элементов.
#footer {
clear: both;
}Свойство clear может принимать четыре значения. Both, наиболее используемое, применяется для отмены float каждого из направлений. Left и Right — используются для отмены float одного из направлений. None — по умолчанию, обычно не используется, за исключением случаев, когда необходимо отменить значение clear. Значение inherit было бы пятым значением, но оно странным образом не поддерживается в Internet Explorer. Отмена только левого или правого float, встречается гораздо реже, но, безусловно, имеет свои цели.
Большой коллапс
Ещё одна удивительная вещь при работе со свойством float — это то, что его использование может влиять на родительский элемент. Если такой элемент содержит только float-элементы, то он буквально схлопывается, то есть его высота равна нулю. Это не всегда заметно, если у родительского элемента не установлен какой-либо видимый фон.
Такое схлопывание выглядит нелогичным, однако альтернатива ещё хуже. Рассмотрим такой пример:
Если блочный элемент, располагающийся наверху, будет автоматически увеличиваться, чтобы вместить все float-элементы, то мы получим неестественный разрыв в тексте между параграфами, без всякой возможности это исправить. Если бы было именно так, наши дизайнеры жаловались бы гораздо чаще такому поведению, чем схлопыванию.
Таким образом, схлопывание почти всегда необходимо, чтобы предотвратить трудности в вёрстке. Для того чтобы изменить такое поведение, необходимо добавить элемент отменяющий float после float-элементов, но до закрытия родительского элемента.
Способы отмены float
Если вам известно, что следом после float-элементов, всегда будет выводится какой-либо другой элемент (например футер), то вам достаточно ему установить свойство clear: both;, как в примере выше, и заниматься дальше своими делами. Это идеальный вариант, поскольку он не требует каких-либо хаков, или дополнительных элементов. Конечно не всё в нашей жизни так гладко и бывают случаи когда такого способа не достаточно. Поэтому необходимо иметь несколько дополнительных способов в своём арсенале.
И, как вы понимаете, каждый из способов используется в различных ситуациях. Возьмём, к примеру, сетку из блочных элементов, отличающихся типами.
Для более лучшего визуального представления было бы неплохо объединить подобные блоки. Например мы хотим, чтобы каждый тип начинался с новой строки, в нашем случае тип элемента определяется цветом. Мы можем использовать метод с overflow или «метод простой очистки», если у каждой группы есть свой элемент-контейнер. Или же мы можем использовать метод пустого div-а между каждой из групп. Три элемента-контейнера, или три пустых div-а, что лучше для вашей задачи — решать вам.
Проблемы с float
Float часто стараются обходить, поскольку работать с ними надо очень аккуратно. Большинство ошибок пришло вместе с IE6. Поскольку всё больше и больше веб-дизайнеров отказываются от поддержки IE6, то вас могут и не волновать эти проблемы. Но для тех, кому не всё равно, вот краткий список.
- «Выталкивание» (pushdown). Возникает когда элемент внутри float-элемента оказывается шире его (обычно это изображения). Большинство браузеров обработает такие элементы вне float-структуры и вёрстка не будет сломана. IE расширит элемент, чтобы изображение влезло, зачастую это ломает дизайн. На картинке представлен пример, как изображение торчит из основного контента и таким образом «выталкивает» сайд-бар вниз. Самый просто способ избежать этого — это проверить что все ваши изображения подходят по ширине. Можно использовать overflow: hidden;, чтобы обрезать выступающую часть.
- Двойной внешний отступ. Ошибка проявляющаяся в IE6, в случае если вы устанавливаете внешний отступ в том же направлении, в котором у вас указан float. В этом случае отступ удваивается. Чтобы исправить это, необходимо установить плавающему (float) элементу свойство display: inline;, не беспокойтесь, элемент по прежнему будет блочным.
- Трёх-пиксельный прыжок (3px Jog). Ошибка, которая проявляется следующим образом: текст, который расположен рядом с float-элементом неожиданно съезжает на 3 пикселя. Чтобы избежать этого, необходимо установить ширину или высоту пострадавшему тексту.
- В IE7 существует Ошибка нижнего внешнего отступа (Bottom Margin Bug) — возникает когда элемент с установленным свойством float, содержит в себе ещё один float-элемент. В таких случаях, нижний внешний отступ дочернего элемента игнорируется. Для обхода этой проблемы необходимо использовать внутренний отступ родительского элемента, вместо внешнего отступа дочернего.
Альтернативы float
Если вам необходимо обтекание картинки текстом, то альтернатив нет. Но для макета страницы, определённо есть выбор. Существуют очень интересные подходы, в которых комбинируется гибкость float с мощью абсолютного позиционирования. В CSS3 есть, так называемый, Модуль разметки шаблона (Template Layout Module), который в будущем предоставит достойную альтернативу float.
float | CSS | WebReference
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам (за исключением абсолютно позиционированных) |
| Анимируется | Нет |
Синтаксис
float: left | right | noneОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- left
- Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
- right
- Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
- none
- Обтекание элемента не задаётся.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>float</title> <style> .pull-left { float: left; /* Обтекание блока по правому краю */ padding-right: 10px; } </style> </head> <body> <div> <img src=»image/figure.jpg» alt=»»> </div> <p>Бихевиоризм, как бы это ни казалось парадоксальным, просветляет сублимированный стимул, так, например, Ричард Бендлер для построения эффективных состояний использовал изменение субмодальностей.</p> </body> </html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства float
Объектная модель
Объект.style.cssFloat
Примечание
В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трёхпиксельный баг») в направлении, заданном значением float.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
float — плавающий блок, обтекание текстом картинки
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 7.0+ | 1.0+ |
Описание
CSS свойство float позволяет сделать элемент плавающим, смещая его к левому или правому краю родительского элемента, в зависимости от того, какое значение установлено. Если для плавающего элемента явно не установлена ширина (width), то он сжимается по ширине до размеров содержимого.
Браузер обрабатывает код HTML документа двигаясь сверху вниз, когда обработка кода доходит до плавающего элемента, браузер размещает его сначала согласно потоку документа, т.е. под тем элементом где он расположен в коде документа, затем он удаляет плавающий элемент из нормального потока и смещает его на максимально возможное расстояние к левому или правому краю родительского элемента:
Поскольку плавающий элемент был удалён из потока документа остальные блочные элементы, расположенные в коде после него, смещаются на его место, будто этого элемента там и не было.
Несмотря на то, что плавающий элемент был удалён из нормального потока, на строчное содержимого, тем не менее он влияет. В отличие от блочных элементов, строчное содержимое, расположенное в коде после плавающего элемента, учитывает его границы и обтекает его, то есть происходит обтекание текстом плавающего блока:
Вместо плавающего блока с текстовым содержимым, можно сделать плавающей картинку. В этом случае будет производится обтекание картинки текстом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
p { width: 250px; }
img { float: left; }
</style>
</head>
<body>
<p>
<img src="css.png">
С помощью CSS свойства float картинка была сделана плавающей с левой стороны.
Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку
по правой и нижней стороне.</p>
</body>
</html>
Попробовать »В одном ряду можно размещать более одного плавающего элемента, если это позволяет ширина родительского элемента. Если ширины родительского элемента не хватает, то плавающие элементы, которые не помещаются в ряд с остальными плавающими элементами, будут смещены вниз.
Плавающие элементы не влияют на высоту родителя, то есть, если есть некоторый контейнер, а в нём находятся только плавающие элементы, то высота контейнера будет равна нулю. Решить данную проблему можно следующими способами:
- Задать фиксированную высоту — в тех случаях, когда известно какая должна быть высота контейнера.
- Применить свойство overflow со значением
autoилиhiddenк контейнеру, тогда плавающие элементы будут учитываться при вычислении высоты контейнера. Этот способ можно использовать когда заранее не известно какая должна быть высота контейнера.
Свойство float работает только с блочными элементами, поэтому, если свойство float применяется к элементам какого-то другого типа, то они преобразуются к блочному типу.
Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float. Также свойство float не оказывает никакого эффекта на флексбоксы.
| Значение по умолчанию: | none |
|---|---|
| Применяется: | ко всем элементам, кроме тех, которые имеют абсолютное или фиксированное позиционирование |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.cssFloat=»left» |
Синтаксис
float: none|left|right|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| left | Элемент плавает слева. |
| right | Элемент плавает справа. |
| none | Элемент не является плавающим и будет отображаться точно там, где он расположен. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
Элемент, значение которого вы меняете.
Измените значение. Обратите внимание на результат расположения элементов.
div#myDIV {
width: 100px;
background-color: red;
float: none;
}
float — Веб-технологии для разработчиков
Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещен вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.
Summary
CSS свойство float указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента. Текст и inline элементы будут обтекать такой элемент.
Плавающий элемент — это любой элемент со свойством float отличным от none.
| Начальное значение | none |
|---|---|
| Применяется к | все элементы, но не будет эффекта, если display: none |
| Наследуется | нет |
| Отображение | визуальный |
| Обработка значения | как указано |
| Animation type | discrete |
| Канонический порядок | уникальный неоднозначный порядок, определённый формальной грамматикой |
Поскольку float подразумевает использование блочной модели, это свойство изменяет вычисляемые значения display в следующих случаях:
| Specified value | Computed value |
|---|---|
inline | block |
inline-block | block |
inline-table | table |
table-row | block |
table-row-group | block |
table-column | block |
table-column-group | block |
table-cell | block |
table-caption | block |
table-header-group | block |
table-footer-group | block |
flex | flex, float не оказывает влияния на такие элементы |
inline-flex | inline-flex, float не оказывает влияния на такие элементы |
| other | не меняются |
element.style object, you must spell it as cssFloat. Also note that Internet Explorer versions 8 and older spelled this styleFloat. This is an exception to the rule that the name of the DOM member is the camel-case name of the dash-separated CSS name (and is due to the fact that «float» is a reserved word in JavaScript, as with the need to escape «class» as «className» and escape ‘s «for» as «htmlFor»).Syntax
float: left; float: right; float: none; float: inherit;
Values
left- Is a keyword indicating that the element must float on the left side of its containing block.
right- Is a keyword indicating that the element must float on the right side of its containing block.
none- Is a keyword indicating that the element must not float.
Formal syntax
left | right | none | inline-start | inline-end
Examples
Посмотреть живые примеры
<style type="text/css">
div { border: solid red; max-width: 70ex; }
h5 { float: left; margin: 0; }
</style>
<div>
<h5>HELLO!</h5>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
HELLO!
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.How floats are positioned
As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it’s containing box or another floated element.
In the image below, there are three red squares. Two are floated left and one is floated right. Note that the second «left» red square is placed to the right of the first. Additional squares would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.
Clearing floats
In the example above, the floated elements are shorter vertically than the block of text they’re floated within. However, if the text was not long enough to wrap below the bottom of all the floats, we might see unanticipated effects. If the paragraph above, for instance, only read «Lorem ipsum dolor sit amet,» and was followed by another heading of the same style as the «Floats Example» heading, the second heading would appear between the red boxes. Most likely, we want the next heading to be aligned all the way to the left. To accomplish that, we’d need to clear the floats.
The simplest way to clear the floats in this example is to add the clear property to the new heading we want to be sure is aligned left:
h3.secondHeading { clear: both; }
However, this method only works if there are no other elements within the same block formatting context that we do want the heading to continue to appear next to horizontally. If our h3 has siblings which are a sidebars floated to the left and right, using clear will force it to appear below both sidebars, which is probably not what we want.
If clearing floats on an element below them is not an option, another approach is to limit the block formatting context of the floats’ container. Referring to the example above again, it appears that all three red boxes are within a P element. We can set the overflow property on that P to hidden or auto to cause it to expand to contain them, but not allow them to drop out the bottom of it:
p.withRedBoxes { overflow: hidden; height: auto; }
Note: Setting overflow to scroll will also contain any floated child elements, but will show scrollbars no matter the height of the content. Here we’re setting height to auto even though that’s the default to indicate that the container should grow to accommodate its content.
Specifications
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 или ранее) | 4.0 | 7.0 | 1.0 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |
See also
Цели проекта могут стать тяжеловесами, если у нас не будет гибкости для внесения интуитивных изменений. Нам нужна свобода делать выбор. Project Float и Free Float анализ являются одними из источников, чтобы сделать выбор в проекте. Мы используем термин float для выражения гибкости. Эта гибкость может быть на уровне проекта или на уровне деятельности.
Во время моих сессий коучинга я наблюдаю большое замешательство по поводу различных типов поплавков, которые могут существовать в схеме сетевого графика.Многие кандидаты на сертификацию Project Management Professional (PMP) ® считают, что общее и свободное плавание одинаково. В этом блоге я расскажу об этом, чтобы все недоразумения исчезли. И для этого давайте сначала обсудим несколько пунктов / определений:
- Во время плановой сетевой диаграммы — активность может быть или предшествующей или последующей операцией, соответствующей зависимой операции, которую мы называем
- Предшественник — Операция, которая логически предшествует зависимому действию в расписании
- Преемник — Зависимое действие, которое логически следует за другим действием в расписании.
- Критический путь — Критический путь — это последовательность действий, представляющая самый длинный путь в проекте. Он определяет минимально возможную продолжительность проекта.
- Все действия на критическом пути называются действиями на критическом пути.
- График Сетевая диаграмма — — это графическое представление логических отношений. Также упоминается как зависимости, среди действий по расписанию проекта
- PDM (метод построения диаграмм прецедентности) — Метод, используемый для построения модели расписания, в которой действия представлены узлами.Они графически связаны одним или несколькими логическими отношениями, чтобы показать последовательность, в которой должны быть выполнены действия. LS & LF для деятельности.
Теперь вернемся к плаванию. Существует 2 типа поплавков, которые могут существовать:. Давайте посмотрим, что это за поплавки
. Основано на Руководство PMBOK®, шестое издание. . Общее число поплавков составляет
. действие по расписанию может быть отложено или продлено с даты его раннего начала, не задерживая окончательную дату проекта или не нарушая ограничения по расписанию.
Итак, речь идет о гибкости, которую мы имеем на уровне проекта. Теперь в схеме сети у нас может быть много путей для достижения конца. Так что это число говорит о гибкости одного пути по сравнению с другими.
Теперь вопрос , как рассчитывается общее число с плавающей запятой?
Простая формула для расчета общего плавания или провисания является нашей обычной формулой, то есть LS (поздний старт) — ES (ранний старт) или LF (поздний, конец) — EF (ранний конец)
Давайте сделаем это проще, чтобы увидеть —
Как рассчитывается время перемещения в анализе критического пути? А что такое метод с плавающей точкой в методе критического пути?
Полные значения float и slack являются синонимами.
Общее плавание — это разница между датой завершения проекта и общей продолжительностью критических действий на пути.
Другими словами, у вас есть проект, который нужно завершить за 25 дней. Ваши рассчитанные критические действия на графике сети займут 22 дня. Итак, у вас есть проект с плавающей точкой +3 дня. Здесь вы можете видеть, что на плаву может быть положительное или отрицательное число.
Мы обсудим отрицательное число с плавающей точкой позже в этом посте.
Итак,
Найдите на диаграмме сети вторую по длине последовательность действий.Вычтите его общую продолжительность из продолжительности последовательности критического пути. Разница между этими двумя длительностями даст вам число с плавающей точкой для каждого действия во второй последовательности.
Я вижу еще одну путаницу — Float — это то же самое, что и лаг? Причина этой путаницы заключается в концепции способности задерживать деятельность. Отставание — это задержка в деятельности преемника. Total Float — это время, на которое вы можете отложить действие с даты его раннего начала, не задерживая дату окончания проекта.
Тогда в чем разница между лагом и общим числом с плавающей запятой?
Обе имеют разные цели, когда мы смотрим на это с реалистичного сценария управления проектами:
Lag используется для преднамеренной задержки, чтобы удовлетворить некоторую уже имеющуюся зависимость или предварительное условие. Как будто вы не можете начать работу по нанесению обоев, пока последний слой краски не будет готов и не высохнет. В этом случае вам нужно отложить работу обоев на несколько дней.
Вы можете видеть, что это как зависимость или необходимость.
Но поплавок — это наша гибкость, которая помогает нам делать желаемый выбор. Это зависит от менеджера проекта, хочет он или она использовать его или нет. например, в проекте на некотором пути есть шесть дней плавания. Менеджер проекта использует его, чтобы принять наилучшее решение для проекта.
Руководитель проекта может завершить задание на этом пути за шесть дней. И затем поместите ресурс в другое место. Или он / она может сначала использовать ресурс где-то еще, а затем вернуть его к активности этого пути.Таким образом, он / она все еще должен уметь соответствовать датам и ограничениям.
В двух словах, отставание преднамеренное не может быть обойдено. Float — это гибкость, которую можно планировать и управлять, чтобы оптимизировать максимально возможную ценность для проекта.
Free Float
Теперь перед нами стоит реальная задача, Free Float отличается от Total Float, и да, это не маленькая разница, которая может спутать одно с другим.
Количество времени —
, на которое действие по расписанию можно отложить, не задерживая дату раннего начала какого-либо преемника или не нарушив ограничение по расписанию
Очевидный вопрос — Как рассчитать свободное плавание и независимое плавание?
Простая формула для расчета Free Float — это ES (преемника) — EF текущей деятельности
Здесь мы говорим о действиях и о том, насколько активность может быть отложена по сравнению с ее преемниками
Давайте рассмотрим пример, чтобы увидеть, как для расчета free float —
Если вы используете формулу, LS-ES или LF-EF получат действие два с плавающей запятой на восемь дней.Но здесь это плавание превращается в свободное плавание … давайте посмотрим, как …Вы не можете отложить деятельность два на восемь дней, не замедляя раннее начало действия тринадцатого 17-го числа … так что поток активности два = 6 дней.
Для операции общее плавание может стать свободным плаванием, если —
Преемник имеет более одного сходящегося действия или действие преемника имеет ограничение
Все действия не имеют свободного плавать.Вам нужно посмотреть, есть ли свободный доступ для деятельности.
Давайте рассмотрим еще один пример для компиляции. См. Схему сети ниже:
Что изображает эта диаграмма?
- Есть 3 пути ACE, BCE и BDE. ACE будет критическим путем с общим числом с плавающей запятой 0 и длиной критического пути 18
- Мероприятия A, C & E будут иметь даже свободное плавание 0 (нет вида с плавающей запятой / гибкость для операций с критическим путем)
- Общее плавание для B 1 (LF-EF ИЛИ LS-ES) и активность D составляет 6
- Вне B & D, какая деятельность может иметь свободное плавание? Деятельность B не удовлетворяет определению free float.То есть B может быть задержан с W.r.t C (6-4-1 = 1), но не с W.r.t D (5-4-1 = 0). Поэтому, если «ЛЮБАЯ» часть определения не удовлетворяет, т. Е. Нельзя откладывать В, не влияя на ЛЮБОГО его преемника.
- Свободное плавание для действия D = 14-7-1 = 6. Это действие удовлетворяет определению наряду с пунктом 4, а также в примере нет зависимости / ограничения, которое может помешать деятельности D, имеющей гибкость.
Итак, в чем разница между общим и свободным обращением?
Total Float Free Float Рассчитано на уровне действий Рассчитано на уровне действий Определяет гибкость пути w.rt дата окончания проекта Определить гибкость деятельности при ее преемнике возникает, если у сетевой диаграммы есть несколько путей, и есть критические пути, которых нет. Может появиться, если у преемника имеется более одного сходящегося действия, или у действия преемника есть ограничение Теперь перейдите к отрицательному значению:
A Многие кандидаты на получение сертификата PMP® спрашивают меня — Может ли критический путь иметь отрицательное значение? Может ли float быть отрицательным?
Да, почему бы и нет?
Float — это гибкость, но отрицательная величина Float — это гибкость.Это навязанное ограничение. Например, вы рассчитали завершить мероприятие за 10 дней, но из-за предстоящего фестиваля вы должны завершить его за пять дней. Ваша логика требует десяти дней, но ограничение не позволяет вам выйти за пределы пяти дней. Здесь у вас есть отрицательное смещение пяти дней.
Это временная ситуация, потому что вы не можете покинуть проект с отрицательным смещением. Здесь ваша гибкость была подхвачена, и вам нужно встать для некоторых действий. Вы должны подтянуть проект, чтобы соответствовать ожиданиям заинтересованных сторон.Вам нужно найти способы заставить этот отрицательный поплавок успокоиться. Он должен прийти к 0 от отрицательного числа, чтобы избавиться от отрицательного числа с плавающей точкой.
Если вам необходимо обсудить эти концепции с некоторыми практическими сценариями управления проектами, сразу же посмотрите следующее видео.
Я надеюсь, что теперь основное различие между этими поплавками очевидно, и загадка Плавающего для вас не более плавающая. Если у вас все еще возникают какие-либо сомнения или недоразумения, вы можете обратиться к двум пунктам — сначала к определению, а затем к приведенной выше таблице.Приятного чтения и ответов на вопросы здесь на нашем ФОРУМЕ ОБСУЖДЕНИЯ
.с плавающей запятой — Что такое поплавок в Java?
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Публичные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимать технический талант
- реклама Связаться с разработчиками по всему миру
переменных — Какая разница между Float и float в Java?
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Публичные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимать технический талант
- реклама Связаться с разработчиками по всему миру
с плавающей запятой — Какая разница между десятичным и плавающим в C #? Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Публичные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимать технический талант
- реклама Связаться с разработчиками по всему миру
