Главная → Программирование → by

CSS Float Теория: Что нужно знать

Концепция поплавки, вероятно, один из самых неинтуитивными концепций в CSS.Поплавки часто неправильно понимаются и обвиняют всех плавающих контекст вокруг него, в результате чего читаемость и удобство проблем.Тем не менее, причина этих проблем isn’ T самой теории, но то, как теория интерпретируется – разработчиками и browsers.

Тем не менее, если вы внимательно посмотрите на поплавок теории, you’ узнаю, что он isn’ т, что сложно, как кажется.Большинство проблем, связанных вызваны старыми версиями (возьмем предположение) Internet Explorer.Если вы знаете ошибок, Вы можете управлять тем, как информация представлена ​​в более сложных, глубоких way.

Let’ Давайте попробуем решить этот вопрос и уточнить некоторые обычные недоразумения, которые всегда появляются, как только поплавков используются.We’ ве просмотрел десятки статей и выбрали наиболее важных вещей, которые вы должны иметь в виду развивающиеся CSS-макетов с floats.

Что вы должны знать о Floats

  • “ Практика обтекания текстом вокруг изображения восходит долгое, долгое время.That’ поэтому возможность была добавлена ​​в Web, начиная с Netscape 1.1, и почему CSS позволяет, используя свойство поплавка.Термин “ float” относится к тому, в котором элемент плывет в сторону и вниз, как описано в оригинале “ дополнений в HTML 2.0″ документ, который сопровождается выпуском Netscape 1.1.” Containing Floats [ Содержащие Floats]
  • “ всплывающего бокса расположена в пределах нормальных flow, то вынимают из потока и смещен влево или вправо как можно дальше.Контент может протекать по части поплавка.[...] Когда окна выводят из нормального потока, все содержание, все еще в пределах нормального потока будет игнорировать его полностью, а не освободить место для it.” [ Float Positioning]
  • “ Когда вы плывете элемент она становится блока box.Это поле может быть смещен влево или вправо по текущей строки.Разметка вариантов float: left float: right или float: none ” [ Floatutorial: Float Basics].
  • “ Вы должны всегда устанавливать ширину по размещенным items (за исключением случаев, наносится непосредственно на изображении – который имеет неявную ширину).Если ширина не установлена, то результаты могут быть unpredictable.” [ Floatutorial: FloatBasics]
  • “ С одной стороны, окно появилось и должны иметь ширину, определенных для него, явно или неявно.В противном случае, она будет заполнить его содержащего блока по горизонтали, так же, как, не размещенных содержания, не оставляя места для других содержанию течь вокруг него.Во-вторых, в отличие от коробки в нормальном потоке, вертикальные края всплывающего бокса не рухнул с края коробки либо выше, либо ниже ее.Наконец, размещенных окна могут перекрываться блочные коробки прилегающих к ней в нормальных flow.” CSS Positioning: Floats [ CSS Позиционирование: Floats]
  • “ Первое, что нужно помнить, это то, что плавающий элемент смещается либо в левой или с правой стороны.Это не возможно сделать элемент плавающей точкой в ​​центре, то, что часто приводит к разочарованию для начинающих.Основное правило заключается в том, что плавающий элемент лишь смещаются sideways.” [ Float Layouts]
  • “ Когда мы плавающий элемент она смещается вправо или влево, пока не достигнет края содержащего блока.Если мы затем плавают рядом еще один элемент в том же направлении, он будет смещен, пока его край достигает края первого плавающего элемента.[...] Если мы будем плыть несколько элементов, в том же направлении, они будут накапливаться, но рано или поздно we’ будете запускать из космоса [...], когда не хватает места на линии, они сдвигаются вниз, пока они неfit.” [ Float Layouts]
  • Содержащие или содержащие блоки коробки: “ содержащий блок коробку или блок, который содержит другие элементы (потомок ящиков).Element’ содержащий блок с означает “ содержащий блок, в котором элемент lives”.[ Floatutorial]
  • “ плавали коробки будет двигаться влево или right пока их внешний край касался края содержащего блока или внешнего края другой float.” [ Floatutorial: Float Basics]
  • “ Если указан, окно располагается вертикально, как это было бы в нормальном потоке, его верхний соответствие с верхней части текущего окна линию.Но горизонтально, он смещается, как далеко вправо или влево, его содержащего блока, как это возможно, в этом block’ S обивка (как и другие материалы).Ближайшие инлайн-содержимое, затем позволил течь вокруг противоположного side.” [ CSS Позиционирование: Floats]
  • “ С обращении находится не в потоке,Номера расположены боксы блока созданные до и после потока окно плавать вертикально, как будто поплавок didn’ т существует.Тем не менее, линия коробки создали рядом с поплавком укорачиваются, чтобы освободить место для всплывающего бокса.Любая информация, содержащаяся в текущей строке перед всплывающего бокса reflowed в первый доступный линии на другую сторону float.” W3C Visual Formatting Model [ W3C визуального форматирования Model]
  • “ Если isn’ т достаточно горизонтальной номера на текущей линии для всплывающего бокса, он будет двигаться вниз, строка за строкой, пока линия есть место для it.” [ Floatutorial: Float Basics]
  • “ плавающие окна никогда не может закончиться над верхней кромкой линии, где it’ S создан.[...] Верхний край всплывающего бокса совмещен с верхним краем окна текущей строки (или с нижнего края предыдущего окна блока, если нет линейного блока) ”. [ Float Layouts]
  • “ Для того, чтобы действительно понять, поплавок теории вы должны понимать, что линия окне средства в CSS.К сожалению, это в свою очередь требует, чтобы вы поняли, что подразумевается под инлайн-бокс.[...] Инлайн-бокс порождается теми элементами, которые aren’ T блок-уровня, такие как EM.[...] Линия окно воображаемого прямоугольника, который содержит все инлайн-боксов, которые составляют линию в содержащим элемент уровня блока.Это (по крайней мере) как высокий, как ее высокая линия box.” [ Float Layouts]
  • “ Если мы прилагаем каждого столбца в элементе DIV с float: left они появятся рядом, так же, как мы ожидаем, колонны делать.Если бы мы тогда хотим полной ширины нижнего колонтитула будет показано в нижней части, независимо от того, какой столбец бывает длинная, мы только должны установить clear: both на it.” [ Float Layouts]
  • “ потенциальный недостаток использования поплавков, чтобы содержать поплавки в том, что Вы полагаетесь на браузерах последовательно интерпретировать layout из нескольких вложенных плавающих элементов.Ситуация становится более хрупким, если эти поплавки являются частью более сложного макета, один возможно, с использованием поплавков, позиционирование, или tables.” [ содержащие Floats]

Очистка floats

  • “ Элементы после плавающий элемент будет обернуть вокруг плавающего элемента.Если вы не хотите, чтобы это произошло, вы можете обратиться “ clear” собственности на эти следующие элементы.Четыре варианта clear: left, clear: right,clear: both или clear: none. ” [ Поплавки и "очистить" ]
  • Как очистить CSS плывет без дополнительной разметки – различных методов объяснить.Существуют три основных подхода: а) плавающие содержащий элемент а, б) Использование overflow: hidden на контейнер, в) Создание содержимого с помощью :after CSS псевдо-класса. Тест-страницы для techniques.[ Как очистить CSS плывет без дополнительной markup]
  • “ стандартный метод делает внешний контейнер по всей видимости, “ enclose” вложенные Поплавок разместить полную “ cleared” последнего элемента в контейнере, который имеет эффект ‘ dragging’ нижнего краясодержащего окно ниже, чем float.”
  1. <div> <!-- float container -->
  2. <div style="float:left; width:30%;"><p>Some content</p></div>
  3. <p>Text not inside the float</p>
  4. <div style="clear:both;"></div>
  5. </div>
  • [ Как очистить поплавки без структурных Markup]
  • “ общая проблема с поплавком основе макетов в том, что floats’ контейнер doesn’ хотите, чтобы протянуть до разместиться поплавки.Если вы хотите добавить, скажем, рамку вокруг всех флотов (т.е. границу вокруг контейнера) you’ придется командовать браузеров, чтобы как-то протянуть до контейнера на всем пути.Вы можете очистить поплавки использованием переполнения method. ” Clearing Floats [ Посредничества floats]
  • Использование :after: представьте себе, что мы используем: после того, как вставить простой характер, как ‘ period’, а затем дать, создавшего элемент {clear: both;}.That’ все, что вам действительно нужно, чтобы сделать работу, но никто не хочет линии пространства испортить конца их чистые окна контейнера, поэтому мы также используем {height: 0;} и {visibility: hidden;} сохранить нашу период с showing.
  1. .clearfix:after {
  2. content: ".";
  3. display: block;
  4. height: 0;
  5. clear: both;
  6. visibility: hidden;
  7. }
  • [ Как очистить поплавки без структурных Markup]
  • Clearfix: “ Когда поплавок находится внутри контейнера коробки, которая имеет видимые границы или фона, которые плавают автоматически не заставит container’ с нижним краем вниз, как поплавок сделано выше.Вместо поплавка игнорируется контейнер и будет висеть вниз из контейнера дно, как флаг.[...] IE / Win вовсе заключить с плавающей точкой в ​​контейнере‘ Automatically’, но только в том случае, если контейнер элемент имеет указанный dimension.” [ Easyclearing: Как очистить поплавки без структурных Markup]

CSS Float Bugs

Comments are closed.