Html — Странное поведение float, спасайте


Содержание

html — Странное поведение div и float: left

У меня есть этот пример кода:

Содержимое div 2 помещается слева от содержимого div 1 (отлично), но граница div 2 содержит div 1. Это происходит во всех проверенных браузерах (Firefox 26.0 и IE8).

Не могли бы вы объяснить, что происходит?

    1 1
  • 21 июн 2020 2020-06-21 22:05:14
  • Lesto

1 ответ

Потому что вы не плаваете еще один div — Demo

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

Так что происходит, когда плавающий div просто сидит слева, заставляя вас не всплывать div .

Если вы переместите порядок вашего div в разметке, вы поймете, что я имел в виду — Demo Итак, как вы видите, верхний div занимает все доступное горизонтальное пространство, тогда как другой div сидит слева, не займет всего горизонтальное пространство, когда оно плавает влево, так что, поскольку у вас есть floated div first и next is non floated div он займет 100% пространства, но будет обтекать плавающий div так как вы его не очистили, поэтому вы должны float следующий div .

Тот же эффект может быть достигнут при использовании display: inline-block; также.

Для получения дополнительной информации о том, как работают поплавки, напишите мой ответ здесь

Свойство float

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

Далее мы рассмотрим, как работает float , разберём решения сопутствующих проблем, а также ряд полезных рецептов.

Как работает float

При применении этого свойства происходит следующее:

  1. Элемент позиционируется как обычно, а затем вынимается из документа потока и сдвигается влево (для left ) или вправо (для right ) до того как коснётся либо границы родителя, либо другого элемента с float .
  2. Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.
  3. Другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока.
  4. Строки (inline-элементы), напротив, «знают» о float и обтекают элемент по сторонам.

Элемент при наличии float получает display:block .

То есть, указав элементу, у которого display:inline свойство float: left/right , мы автоматически сделаем его блочным. В частности, для него будут работать width/height .

Исключением являются некоторые редкие display наподобие inline-table и run-in (см. Relationships between „display“, „position“, and „float“)

Ширина float -блока определяется по содержимому. («CSS 2.1, 10.3.5»).

Вертикальные отступы margin элементов с float не сливаются с отступами соседей, в отличие от обычных блочных элементов.

Это пока только теория. Далее мы рассмотрим происходящее на примере.


Текст с картинками

Одно из первых применений float , для которого это свойство когда-то было придумано – это вёрстка текста с картинками, отжатыми влево или вправо.

Например, вот страница о Винни-Пухе с картинками, которым поставлено свойство float :

Её HTML-код выглядит примерно так:

Каждая картинка, у которой есть float , обрабатывается в точности по алгоритму, указанному выше.

Посмотрим, например, как выглядело бы начало текста без float:

  1. Элемент IMG вынимается из документа потока. Иначе говоря, последующие блоки начинают вести себя так, как будто его нет, и заполняют освободившееся место (изображение для наглядности полупрозрачно):
  1. Элемент IMG сдвигается максимально вправо(при float:right ):
  1. Строки, в отличие от блочных элементов, «чувствуют» float и уступают ему место, обтекая картинку слева:

При float:left – всё то же самое, только IMG смещается влево (или не смещается, если он и так у левого края), а строки – обтекают справа

Строки и инлайн-элементы смещаются, чтобы уступить место float . Обычные блоки – ведут себя так, как будто элемента нет.

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

Как видно из рисунка, параграфы проходят «за» float . При этом строки в них о float’ах знают и обтекают их, поэтому соответствующая часть параграфа пуста.

Блок с float

Свойство float можно поставить любому элементу, не обязательно картинке. При этом элемент станет блочным.

Посмотрим, как это работает, на конкретной задаче – сделать рамку с названием вокруг картинки с Винни.

Проблемы float и их решения

В процессе верстки с использованием float-элементов вы непременно заметите некоторые странности в их поведении. Мы расскажем о наиболее часто встречающихся проблемах и способах их решения.

Проблема 1. Обтекание влияет на другие элементы

На первом уроке по свойству float мы рассмотрели пример, где футер, расположенный сразу за плавающими блоками, ведет себя странно, прижимаясь верхним краем к низу float-элемента. Это происходит из-за того, что, по сути, футер обтекает боковую панель, но поскольку он занимает 100% ширины, то обтекание выражается лишь прижиманием к нижнему краю, без перемещения по горизонтали.

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

Элемент с классом .b4 пробует обтекать float-элемент .b3 , содержащийся в контейнере .wrapper , но поскольку .b4 не влазит в один ряд с .wrapper , он просто прижимается верхней стороной к этому ряду, из-за чего между блоками не остается свободного пространства. Как видите, элементу .b4 дополнительно задано свойство margin-top: 50px , эффект которого сейчас не заметен. Не зная причины, можно долго ломать голову, почему margin не работает. Однако, если посмотреть на элемент через инспектор кода, можно увидеть, что margin-top всё же работает, просто сейчас он никак не влияет на картину.


Как сделать, чтобы элемент .b4 перестал обтекать соседний? Конечно же, с помощью свойства clear , которое мы уже рассматривали ранее. Повторим еще раз:

Добавив этот код, мы получили такую картину:

Уже лучше, но отступ в 50 пикселей сверху так и не появился. Он всё ещё накладывается на верхний блок:

Такое впечатление, что элементу со свойством margin-top нет от чего отталкиваться. На самом деле, так и есть, потому что если мы проинспектируем элемент .wrapper , то увидим, что его высота странным образом стала равна нулю:

Проблема 2. Нулевая высота контейнера с float-элементами

Еще одна проблема при работе с float-элементами заключается в том, что блок, содержащий плавающие элементы, теряет свою высоту, поскольку свойство float исключает элементы из нормального потока. Высота родительского контейнера изменяется следующим образом:

  • Если в контейнере содержатся только плавающие элементы, то его высота станет нулевой. Либо, если родителю задано, к примеру, свойство padding-top и/или padding-bottom , то его высота будет равна сумме этих padding-ов.
  • Если в родительском контейнере помимо float-элементов имеются также обычные элементы, то высота родителя будет равна высоте этих обычных элементов плюс отступы.

Иными словами, из высоты блока-родителя просто вычитается высота float-элементов.

Как заставить родительский контейнер учитывать высоту содержащихся в нем плавающих элементов? Есть несколько способов решения этой проблемы. Мы расскажем о двух наиболее распространенных и эффективных хаках:

Micro Clearfix. Этот хак был придуман разработчиком по имени Nicolas Gallagher, и заключается он в добавлении нескольких строк CSS к псевдоэлементу :after родительского контейнера, потерявшего высоту:

Этот код работает во всех современных браузерах. Преимущество данного способа состоит в отсутствии необходимости писать лишний HTML-код.

Overflow: hidden. Второй вариант решения проблемы с пропавшей высотой контейнера — добавить к этому блоку свойство overflow: hidden . Вообще, данное свойство определяет, будет ли видно содержание блочного элемента, если оно не помещается в него целиком и выходит за пределы области. Однако в данном случае оно еще и заставляет учитывать высоту float-элементов.

У этого метода есть недостаток: если в контейнере находятся абсолютно позиционированные элементы, размещенные за пределами его границ, то они могут исчезнуть из поля зрения. Впрочем, то же самое произойдет с любым содержимым, которое будет вылезать за область контейнера — такова работа значения hidden.

Итак, воспользуемся первым хаком и взглянем на результат:

Цукерберг рекомендует:  Django - Вопросы по PythonDjango

Как видим, высота блока-родителя стала включать в себя плавающие элементы, а у элемента .b4 теперь нормально отображается верхний отступ в 50 пикселей.

Проблема 3. Перенос блоков при добавлении отступов

После создания колонок с помощью float вы наверняка захотите наполнить их содержимым. В нашем примере есть три колонки одинаковой ширины, которые идеально помещаются в один ряд. Давайте добавим немного контента в каждую из них:

Выглядит неплохо, но нам не хочется, чтобы текст примыкал так сильно к боковым сторонам блоков. Чтобы сделать небольшие промежутки между текстом и внутренними границами блока, мы добавим padding слева и справа (сейчас он добавлен только сверху и снизу в размере 40 пикселей, а для боковых сторон указан 0):

И здесь у нас появляется проблема: одна из колонок съехала вниз. Это случилось из-за того, что ширина каждой колонки стала равна не 33.333333% , а 33.333333% + 10px + 10px. Как вы помните из предыдущего раздела учебника, полная ширина блока — это сумма чисел, в которую включена ширина содержимого, а также размеры боковых отступов, границ и полей.

Чтобы исправить эту проблему, используйте свойство box-sizing со значением border-box . Тогда браузер будет автоматически включать отступы, поля и рамку в заданную вами ширину блока:

Рекомендуем при создании сетки в CSS заблаговременно прописывать box-sizing , чтобы застраховаться от выпадания блоков при дальнейшей работе с сеткой.

Таковы основные проблемы, которые встречаются у float-элементов и могут быть легко решены. Безусловно, существуют и другие трудности, и некоторые из них порой нельзя обойти простым способом. Однако, зная принципы работы float и помня о вышеперечисленных недостатках, вы уже сэкономите много времени и нервов во время верстки.

Далее в учебнике: что такое адаптивный веб-дизайн.

Html — Странное поведение float, спасайте

Float — это свойство CSS для позиционирования элементов. Для того чтобы понять его назначение и происхождение, можно обратиться к полиграфическому дизайну. В компоновке при печати, изображения могут располагаться на странице так, чтобы текст «обтекал» их. Обычно это так и называется: «обтекание текстом».

В программах для вёрстки страниц, элементы с текстом, могут учитывать изображения, а также и игнорировать их. В случае если они будут проигнорированы, текст будет отображаться над картинками, как будто их и нет. Это главная разница между тем, являются ли изображения частью основного потока страницы, или нет. Веб-дизайн очень похож.

В веб-дизайне, элементы страницы с установленным свойством float, ведут себя точно также как и изображения в полиграфии, когда текст «обтекает» их. Такие элементы являются частью основного потока веб-страницы. Однако всё обстоит иначе, если элементы используют абсолютное позиционирование. Абсолютно позиционированные элементы удаляются из основного потока страницы, подобно примеру выше, когда в полиграфии текст игнорирует изображения. Такие элементы не влияют на позицию остальных элементов, соприкасаются они или нет.

Установка свойства float происходит следующим образом:


Всего есть 4 значения для свойства float. Left и right используются для соответствующих направлений. None (по умолчанию) — обеспечивает, что элемент не будет «плавать». И inherit, которое говорит, что поведение должно быть такое же, как и у родительского элемента.

Для чего можно использовать float?

Помимо обтекания текстом изображений, float может использоваться для создания макета всего сайта.

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

Такое же расположение объектов может быть достигнуто путём использования позиционирования. Объекту-контейнеру присваивается относительное (relative) позиционирование, а объекту с изображением — абсолютное (absolute). В этом случае аватар не повлияет на положение текста.

Отмена свойства float

Для float, родственное свойство — clear. Любой элемент, у которого установлено свойство clear, не будет поднят вверх, как от него ожидается, а отобразится ниже, после float-элементов. Возможно, пример на картинке объяснит лучше, чем слова.

В примере, сайд-бар прижат к правому краю (float: right;), а его высота меньше, чем область основного контента. Поэтому footer будет поднят выше, поскольку для него хватает высоты и этого требует поведение float. Чтобы исправить ситуацию, ему необходимо установить свойство clear, которое гарантирует, что элемент выведется ниже float-элементов.

Свойство clear может принимать четыре значения. Both, наиболее используемое, применяется для отмены float каждого из направлений. Left и Right — используются для отмены float одного из направлений. None — по умолчанию, обычно не используется, за исключением случаев, когда необходимо отменить значение clear. Значение inherit было бы пятым значением, но оно странным образом не поддерживается в Internet Explorer. Отмена только левого или правого float, встречается гораздо реже, но, безусловно, имеет свои цели.

Большой коллапс

Ещё одна удивительная вещь при работе со свойством float — это то, что его использование может влиять на родительский элемент. Если такой элемент содержит только float-элементы, то он буквально схлопывается, то есть его высота равна нулю. Это не всегда заметно, если у родительского элемента не установлен какой-либо видимый фон.

Такое схлопывание выглядит нелогичным, однако альтернатива ещё хуже. Рассмотрим такой пример:

Если блочный элемент, располагающийся наверху, будет автоматически увеличиваться, чтобы вместить все float-элементы, то мы получим неестественный разрыв в тексте между параграфами, без всякой возможности это исправить. Если бы было именно так, наши дизайнеры жаловались бы гораздо чаще такому поведению, чем схлопыванию.

Таким образом, схлопывание почти всегда необходимо, чтобы предотвратить трудности в вёрстке. Для того чтобы изменить такое поведение, необходимо добавить элемент отменяющий float после float-элементов, но до закрытия родительского элемента.

Способы отмены float

Если вам известно, что следом после float-элементов, всегда будет выводится какой-либо другой элемент (например футер), то вам достаточно ему установить свойство clear: both;, как в примере выше, и заниматься дальше своими делами. Это идеальный вариант, поскольку он не требует каких-либо хаков, или дополнительных элементов. Конечно не всё в нашей жизни так гладко и бывают случаи когда такого способа не достаточно. Поэтому необходимо иметь несколько дополнительных способов в своём арсенале.

    Метод пустого div-а. Используется, в буквальном смысле, пустой div.

И, как вы понимаете, каждый из способов используется в различных ситуациях. Возьмём, к примеру, сетку из блочных элементов, отличающихся типами.

Для более лучшего визуального представления было бы неплохо объединить подобные блоки. Например мы хотим, чтобы каждый тип начинался с новой строки, в нашем случае тип элемента определяется цветом. Мы можем использовать метод с 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 в firefox

Во-первых, возможно, уже есть такой вопрос, но я не смог найти его на всю жизнь, так что не обращайте на меня внимания, если он есть. Просто направьте меня к этому, пожалуйста.

Css float ведет себя странно в Firefox, но не в других браузерах. Мне нужно, чтобы изображение в ленте новостей плавало влево, чтобы текст рядом с ним находился вверху изображения, а не внизу. Когда изображение перемещается в Firefox, внутренний пузырь не очищает изображения, а внешний пузырь ничего не очищает.

Цукерберг рекомендует:  Pointer Events API обработка тач-событий


Я сожалею, что разметка немного сложна для чтения и плохо отформатирована. Он был написан на PHP, поэтому получился немного странным.

2 ответа

Если я понимаю, о чем вы спрашиваете, hr должен решить вашу проблему. Это приведет к тому, что будет всегда перемещаться по странице, находясь ниже всплывающих изображений, что будет толкать все остальное вниз, чтобы изображения не плавали рядом друг с другом (но текст по-прежнему отображается рядом с верх соответствующего изображения).

hr на самом деле достаточно для устранения описанной конкретной проблемы, но для кажется уместным очистить в обоих направлениях.

C# выражение Float: странное поведение при приведении результата float к int

У меня есть следующий простой код:

speed1 а также speed2 должен иметь то же значение, но на самом деле, у меня есть:

Я знаю, что, возможно, мне следует использовать Math.Round вместо приведения, но я бы хотел понять, почему значения разные.

Я посмотрел на сгенерированный байт-код, но кроме магазина и загрузки, коды операций одинаковы.

Я также попробовал тот же код в Java, и я правильно получаю 62 и 62.

Может кто-нибудь объяснить это?

Редактировать : В реальном коде это не напрямую 6.2f * 10, а вызов функции * константа. У меня есть следующий байт-код:

мы можем видеть, что операнды являются числами с плавающей запятой и что единственная разница заключается в stloc/ldloc .

Что касается виртуальной машины, я попробовал с Mono/Win7, Mono/MacOS и .NET/Windows, с теми же результатами.

7 ответов

Возможно, для Вашего проекта будут необходимы бесплатные векторные карты. На нашем сайте представлены карты для всех стран.

Прежде всего, я предполагаю, что вы знаете, что 6.2f * 10 не совсем 62 из-за округления с плавающей запятой (на самом деле это значение 61.99999809265137, выраженное как double ) и что ваш вопрос только в том, почему два, казалось бы, одинаковых вычисления приводят к неправильному значению.

Ответ в том, что в случае (int)(6.2f * 10) , вы принимаете double значение 61.99999809265137 и усечение его до целого числа, что приводит к 61.

В случае float f = 6.2f * 10 , вы берете двойное значение 61.99999809265137 и округляете до ближайшего float , который составляет 62. Затем вы обрезаете это float в целое число, и результат составляет 62.

Упражнение: Объясните результаты следующей последовательности операций.

Обновление: как отмечено в комментариях, выражение 6.2f * 10 формально float поскольку второй параметр имеет неявное преобразование в float который лучше чем неявное преобразование в double .

Фактическая проблема заключается в том, что компилятору разрешено (но не обязательно) использовать промежуточное звено, которое более высокая точность, чем формальный тип (раздел 11.2.2). Вот почему вы видите разное поведение в разных системах: в выражении (int)(6.2f * 10) , у компилятора есть возможность сохранить значение 6.2f * 10 в промежуточной форме высокой точности перед преобразованием в int . Если это так, то результат равен 61. Если нет, то результат равен 62.

Во втором примере явное присвоение float вынуждает округление до преобразования в целое число.

Описание

Плавающие числа редко точны. 6.2f это что-то вроде 6.1999998. . Если вы преобразуете его в int, оно усекает его, и это * 10 приводит к 61.

Проверьт.д.он Скитс DoubleConverter учебный класс. С помощью этого класса вы можете реально визуализировать значение с плавающей точкой в ​​виде строки. Double а также float оба являются плавающими числами, десятичными не являются (это число с фиксированной запятой).

Образец

Дополнительная информация


Посмотрите на IL:

Компилятор уменьшает выражения констант во время компиляции до их постоянных значений, и я думаю, что в какой-то момент он дает неправильное приближение, когда преобразует константу в int . В случае speed2 , это преобразование выполняется не компилятором, а CLR, и они, похоже, применяют другие правила.

Я скомпилировал и разобрал этот код (на Win7/.NET 4.0). Я предполагаю, что компилятор оценивает выражение с плавающей константой как double.

Я предполагаю, что 6.2f реальное представление с плавающей точностью 6.1999999 в то время как 62f вероятно, что-то похожее на 62.00000001 . (int) приведение всегда усекает десятичное значение, поэтому вы получаете такое поведение.

РЕДАКТИРОВАТЬ: Согласно комментариям я перефразировал поведение int приведение к гораздо более точному определению.

Single содержит только 7 цифр и при Int32 компилятор усекает все цифры с плавающей запятой. Во время преобразования одна или несколько значащих цифр могут быть потеряны.

дает результат 619999980, поэтому (Int32) (6.2f * 10) дает 61.

Это отличается, когда два Single умножаются, в этом случае нет операции усечения, а только приближение.

Есть ли причина, по которой вы применяете тип int вместо разбора?

тогда прочитал бы

Разница, вероятно, связана с округлением: если вы приведете к double вы, вероятно, получите что-то вроде 61,78426.

Заметки разработчика

Заметки об используемых в работе языках программирования, фреймворках, инструментах и технологиях.

вторник, 4 января 2011 г.

CSS: Всё о float

В современном веб дизайне свойство float используется почти на каждом шагу. Но не смотря на такую распространённость не все понимают механизм работы плавающих блоков, их поведение и какие последствия могут быть от их использования.

Что такое «float»?

Float это свойство CSS позиционирования. Что бы понять его суть и происхождение нужно обратить своё внимание на печатный дизайн. В печатных макетах изображение может быть расположено так, что текст обтекает его. Обычно это и называется «обтекание текстом«.

В макете страницы, блоку который содержит текст можно указать использовать обтекание текстом изображения или игнорировать обтекание. Игнорирование обтекания текстом позволит расположить слова в потоке поверх изображения, как будто его и нет. В этом и состоит разница является изображение частью потока на странице или нет. В веб дизайне всё очень похоже.

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

Установка свойства float для элементов с помощью CSS выглядит следующим образом:

Есть четыре допустимых значения для свойства floatleft, right, none, inherit. Первые два, left и right указывают направления расположения — слева и справа, соответственно. None — значение по умолчанию, указывает что элемент не плавающий и inherit указывающий элементу наследовать значение свойства float от родительского элемента.

Для чего используется float?

Помимо простого примера обтекания текста вокруг изображения, float можно использовать для создания веб макетов.

Float, так же удобно использовать для небольших элементов макета. К примеру, возьмём этот небольшой фрагмент веб страницы. Если мы установим свойство float для небольшого изображения аватара, то когда изменится размер изображения обтекание измениться в соответствии с новыми размерами изображения:

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

Сброс обтекания

Clear родственное свойство свойству float. Элемент с установленным свойством clear не будет двигаться вверх обтекая элемент с установленным свойством float, но будет смещаться вниз игнорируя обтекание. И снова иллюстрация, которая объяснит всё без лишних слов.

В приведённом выше примере, боковая панель «плавала» справа от блока основного контента. «Подвал» переместился в свободное место под боковой панелью, обтекая блок с основным контентом. Для решения этой проблемы необходимо указать значение свойства clear:both «подвала» для «очищения» обтекания обоих столбцов.


Свойство clear имеет четыре значения. Both используется для сброса обтекания в обоих направлениях. Left и Right используются для сброса одного направления — левого или правого, соответственно. None — значение по умолчанию. Inherit может быть пятым значением, но оно на удивление не поддерживается Internet Explorer. Сброс только левого или правого обтекания встречается довольно редко, но имеет практическую пользу.

Великий коллапс

Одна вещь в работе с float вызывает недоумение, это то какое влияние это свойство оказывает на родительские элементы. Если родительский элемент не содержит элементов, кроме плавающего, то его высота буквально коллапсирует. Это не всегда заметно, особенно если родительский элемент не имеет заметного фона, но важно об этом помнить.

Но альтернатива такого коллапса ещё хуже. Рассмотрим следующий сценарий:

Если верхний блок автоматически расширится для размещения плавающего элемента, то мы получим разрыв в потоке текста между параграфами, без возможности его устранения. Если бы это было так, то разработчики жаловались бы гораздо чаще на такое поведение плавающих блоков, чем сейчас на коллапс.

Цукерберг рекомендует:  Долгий путь к импортозамещению

О коллапсе всегда необходимо помнить, что бы предотвратить странное поведение макета и кросс-браузерные проблемы. Мы можем решить эту проблему используя clear после плавающего элемента в контейнере, но до закрытия контейнера.

Техники отмены обтекания

Если вы находитесь в ситуации, когда знаете где будет находится следующий элемент, вы можете использовать clear:both и заниматься дальше своими делами. Это идеальный вариант, так как он не требует ни хаков, ни дополнительных элементов. Но к сожалению обычно не всё идёт так как мы хотим и в этом случае можно использовать следующие инструменты.

Метод пустого блока.

Это в буквальном смысле пустой блок.

Метод переполнения.

Основан на указании CSS свойства overflow для родительского элемента. Если это свойство установлено в auto или hidden для родительского элемента, то он будет расширятся вслед за плавающим элементом эффективно сбрасывая обтекание его для последующих элементов. Этот метод может быть семантически красив, так как не требует дополнительных элементов. Однако, как вы видите мы добавили новый div для использования этого метода, что эквивалентно использованию не семантического пустого блока и менее гибко. Так же следует помнить, что свойство overflow предназначено не для отключения обтекания. Будьте осторожны что бы случайно не скрыть контент или вызвать нежелательные полосы прокрутки.

Метод лёгкой очистки.

Использует CSS псевдо-селектор ( :after ) для удаления обтекания. Вместо использования свойства overflow для родительского элемента установите дополнительный класс для него, например ‘clearfix’ и используйте следующий стиль CSS :

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

Разные ситуации требуют разных методов сброса обтекания. Возьмём для примера сетку разнотипных блоков.

Для лучшего визуального объединения аналогичных блоков мы должны начинать новую строку когда меняется цвет. Мы можем использовать метод переполнения или лёгкой очистки, если у каждой цветовой группы есть родительский элемент. Или используем метод пустого блока между группами. Три родительских блока, которых ранее не существовало или три пустых блока, которых ранее не существовало. Вам решать какой метод лучше.

Проблемы с плавающими элементами

Плавающие элементы часто ругают из-за их хрупкости. Большая часть этой хрупкости идёт от IE6 и его float-ориентированных багов. Но поскольку всё больше и больше разработчиков отказывается от поддержки IE6 , вы можете об этом не думать, но для тех кто заботиться о совместимости вот краткий список.

Выталкивание (pushdown), является симптомом того, что элемент внутри плавающего блока шире этого блока (обычно это происходит с изображениями). Большая часть браузеров будет отображать торчащую часть из плавающего элемента, но это не будет оказывать влияния на макет. IE будет расширять плавающий блок и часто это оказывает радикальное влияние на макет. Типичным примером является изображение торчащие из блока с основным контентом, выдавливающее боковую панель вниз.

Быстрое решение проблемы: используйте overflow: hidden; для обрезания излишков.

Баг с двойными полями (double margin bug) — ещё одна вещь о которой необходимо помнить работая с IE6 . Этот баг выражается в том, что если поле находится с той же стороны куда ориентирован float, поле удваивается. Например:

Мы получим слева поле в 40 px., вместо 20 px.

Быстрое решение проблемы: установить display: inline для плавающего блока, и не волнуйтесь элемент останется блочным.

3х пиксельный толчок (3px Jog). Суть этого бага в том, что текст расположенный рядом с плавающим элементом странным образом смещается на три пикселя, как будто под воздействие силового поля расположенного вокруг плавающего элемента. Быстрое решение проблемы: установить ширину и высоту пострадавшего текста.

В IE7 появляется Баг нижнего отступа (bottom margin bug), когда родительский элемент является плавающим и его потомок расположенный внутри него тоже плавающий элемент. Нижнее поле ( margin-bottom ) потомка игнорируется, элементом предком. Быстрое решение проблемы: Использовать нижнее поле ( padding-bottom ) в родительском элементе, вместо нижнего отступа ( margin-bottom ) потомка.

Оригинальная статья: All About Floats

Разбираем свойство float в CSS


Дата публикации: 2010-02-22

Пару лет назад, когда разработчики впервые начали переходить к 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). Это объявляется, как показано в коде ниже:

странное поведение плавающего HTML-элемент

У меня проблемы с плавающем элементом в моем проекте, и после кода диагностики она сводится к этому скрипке:

Беда показать себя, если вы будете изменять размер часть результата меньше 320px (BG должен стать красным), а затем поднять его обратно в зеленый BG.

Поплавок элемент «два», которые остаются в левой части «один» -элемента при запуске, после того, как изменение размера происходит под «один». Я предполагаю, что происходит, потому что я делаю это блок в 2

Свойство CSS float непредвиденное поведение

Так что я изучал свойство float css, когда заметил странное поведение, которое я не мог знать о его причине.

Это a link к коду и просмотру четырех див, первые два всплывает направо и налево, третьи и четвертый просто нормальные дивы.

Я понимаю, что третий div будет перекрываться вторым, однако я не понимаю, почему содержимое третьего div сместилось вниз, не должно ли оно скрываться за вторым div?

P.S Я знаю, что проблема может быть исправлена ​​с использованием свойства clear для третьего div, однако меня больше беспокоит причина такого поведения.

Код:

Создан 16 сен. 12 2012-09-16 20:20:38 Mohammed Ibrahim

3 ответа

Я нашел ответ на мой вопрос в this document.

Цитирование из документа:

Поскольку поплавок не в потоке, не позиционированные боксы блока, созданные до и после того, как поле флоат текут вертикально, как если поплавок не существовало. Однако линейные поля, созданные рядом с поплавком, сокращаются, чтобы освободить место для плавающей коробки. Любое содержимое в текущей строке перед плавающей коробкой переплавляется в первой доступной строке с другой стороны поплавка.

Поэтому в основном то, что говорит, что документ, плавал элементы могут перекрываться модель Box элементов, добавленных в документ нормального потока, однако не могут перекрываться их содержание; другими словами, содержимое перекрываемого элемента ограничено неперекрываемым пространством.

P.S. До сих пор я отведенный плавающее поведение как таковые:

element1: плавающий элемент

ELEMENT2: не расположен элемент

1-Розыгрыш модели коробки ELEMENT2 в.

2-Нарисуйте коробчатую модель Element1 и ее содержимое.

3-Если элемент Element2 все еще не имеет перекрытия, начните заполнять его содержимым.

4-Если пространство не может содержать весь контент, начните добавлять его под моделью элемента Element2.

Надеюсь, это поможет.

Btw, спасибо и +1 ко всем, кто способствовал этому вопросу.

Создан 17 сен. 12 2012-09-17 06:34:37 Mohammed Ibrahim

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих