CSS Float Theory: вещи, которые вы должны знать

1. Что вы должны знать о поплавках
2. CSS Float Учебники и методы

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

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

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

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

Вас могут заинтересовать следующие похожие посты:

Что вы должны знать о поплавках

• «Практика обтекания текста вокруг изображения восходит к давним-давно. Поэтому эта возможность была добавлена ​​в Интернет начиная с Netscape 1.1 и почему CSS делает возможным использование свойства float. Термин« float »относится к способ, которым элемент перемещается в одну сторону и вниз, как описано в оригинальном документе «Дополнения к HTML 2.0», который сопровождал выпуск Netscape 1.1 ». Содержит Поплавки
• «Плавающая коробка помещается в нормальный поток , затем извлекается из потока и смещается влево или вправо, насколько это возможно. Содержимое может течь вдоль стороны поплавка. [...] Когда коробка извлечена нормального потока, все содержимое, которое все еще находится в нормальном потоке, будет полностью его игнорировать и не освободит место для него ». [ Позиционирование поплавка ]
• «Когда вы перемещаете элемент, он становится блок-блоком . Затем этот блок можно сместить влево или вправо на текущей строке. Параметры разметки: float: left, float: right или float: none.» [ Floatutorial: Основы плавания ]
• «Вы всегда должны устанавливать ширину для плавающих элементов (кроме случаев, когда они применяются непосредственно к изображению, которое имеет неявную ширину). Если ширина не установлена, результаты могут быть непредсказуемыми». [ Floatutorial: Основы плавания ]
• «Во-первых, для плавающего блока должна быть определена ширина, явная или неявная. В противном случае он будет заполнять содержащий его блок горизонтально, точно так же, как и не перемещаемый контент, не оставляя места для другого контента для его обтекания. Второй в отличие от блоков в нормальном потоке, вертикальные поля плавающего блока не сжимаются с полями блоков выше или ниже него. Наконец, плавающий блок может перекрывать боксы уровня блока, смежные с ним в нормальном потоке ». CSS Позиционирование: Плавающие
• «Первое, что нам нужно помнить, это то, что плавающий элемент смещен влево или вправо. Невозможно заставить элемент плавать в центре, что часто расстраивает новичков. Основное правило заключается в том, что плавающий элемент перемещается только вбок ». [Макеты с плавающей точкой]
• «Когда мы перемещаем элемент, он смещается вправо или влево до тех пор, пока он не достигнет края содержащего блока. Если затем мы перемещаем другой элемент поблизости в том же направлении, он будет смещен, пока его край не достигнет края элемента. первый плавающий элемент. [...] Если мы переместим больше элементов в одном направлении, они будут складываться, но рано или поздно у нас закончится свободное пространство [...], когда на линии недостаточно места, они смещены вниз, пока они не подходят. [Макеты с плавающей точкой]
• Содержащие блоки или содержащие блоки: «Содержащий блок - это блок или блок, который содержит другие элементы (блоки-потомки). Содержащий блок элемент означает« содержащий блок, в котором этот элемент живет ». [ Floatutorial ]
• «Плавающие боксы будут перемещаться влево или вправо, пока их внешний край не коснется края содержащего блока или внешнего края другого поплавка». [ Floatutorial: Основы плавания ]
• «Если указано, блок располагается вертикально, как и в обычном потоке, его верхняя часть совпадает с вершиной текущего блока строки. Но по горизонтали он смещен вправо или влево от содержащего его блока, насколько это возможно, в пределах отступа этого блока (точно так же как другой контент). Окружающему встроенному контенту тогда позволено обтекать противоположную сторону. " [ CSS Позиционирование: Плавающие ]
• «Поскольку поплавок отсутствует в потоке, непозиционированные блоки блоков, созданные до и после блока поплавка, перемещаются вертикально, как если бы поплавок не существовал. Однако линейные блоки, созданные рядом с поплавком, укорачиваются, чтобы освободить место для поплавка box. Любое содержимое в текущей строке до всплывающего окна переформатировано в первой доступной строке на другой стороне float. " Модель визуального форматирования W3C
• «Если в текущей строке недостаточно места для всплывающего окна, оно будет двигаться вниз, строка за строкой, пока в строке не будет места для этого». [ Floatutorial: Основы плавания ]
• «Плавающее поле никогда не может оказаться выше верхнего края строки, в которой оно было создано. [...] Верхний край плавающего блока выравнивается по верхнему краю текущего поля строки (или по нижнему краю предыдущий блок блока, если нет строки блока). " [Макеты с плавающей точкой]
• «Чтобы по-настоящему понять теорию float, вы должны понять, что означает линейный блок в CSS. К сожалению, это, в свою очередь, требует от вас понимания того, что подразумевается под встроенным блоком. [...] Встроенный блок генерируется этими элементами которые не являются блочными, например EM. [...] Строковый блок - это воображаемый прямоугольник, который содержит все встроенные блоки, составляющие линию в содержащем элементе уровня блока. высокий, как самая высокая коробка. " [Макеты с плавающей точкой]
• «Если мы заключим каждый столбец в элемент DIV с помощью float: left, они будут отображаться рядом, как мы ожидаем от столбцов. Если затем мы хотим, чтобы нижний колонтитул на всю ширину отображался внизу, независимо от того, какой столбец происходит чтобы быть самым длинным, нам нужно лишь четко заявить: и то, и другое ». [Макеты с плавающей точкой]
• «Потенциальным недостатком использования чисел с плавающей запятой является то, что вы полагаетесь на браузеры для последовательной интерпретации макета нескольких вложенных элементов с плавающей запятой. Ситуация становится более хрупкой, если эти поплавки являются частью более сложной компоновки, возможно, с использованием поплавков, позиционирования, или таблицы. " [ Содержит Поплавки ]

Очистка поплавков

• «Элементы, следующие за плавающим элементом, будут обернуты вокруг плавающего элемента. Если вы не хотите, чтобы это происходило, вы можете применить свойство «clear» к следующим элементам. Доступны четыре варианта: слева, ясно: справа, ясно: оба или ясно: нет. ”[ Плавает и «очистить» ]
• Как очистить CSS-плавающие объекты без дополнительной разметки - объяснены разные методы. Существует три основных подхода: а) Плавающий содержащий элемент, б) Использование переполнения: скрыто в контейнере, в) Создание контента с использованием псевдокласса: after CSS. Тестовая страница для техник , [ Как очистить CSS-плавающие объекты без дополнительной разметки ]
• «Стандартный метод создания внешнего контейнера для« вложенного »вложенного поплавка заключается в размещении завершенного« очищенного »элемента последним в контейнере, что приводит к« перетаскиванию »нижнего края контейнера с содержимым ниже, чем поплавок. «.

1. <div> <! - контейнер с плавающей точкой ->
2. <div style = "float: left; width: 30%;"> <p> Некоторый контент </ p> </ div>
3. <p> Текст не внутри плавающего </ p>
4. <div style = "clear: both;"> </ div>
5. </ DIV>

1. .clearfix: после {
2. содержание: ".";
3. дисплей: блок;
4. высота: 0;
5. ясно: оба;
6. видимость: скрытая;
7. }

• [ Как очистить поплавки без структурной разметки ]
• Clearfix: «Когда поплавок содержится в контейнере, который имеет видимую границу или фон, этот поплавок не будет автоматически сбивать нижний край контейнера вниз, поскольку поплавок становится выше. Вместо этого поплавок игнорируется контейнером и свисает с дна контейнера, как флаг. […] IE / Win заключает float в контейнер «автоматически», но только если элемент контейнера имеет указанное измерение. »[ Easyclearing: как очистить поплавки без структурной разметки ]

CSS Float Bugs

• Когда [...] контейнерный элемент имеет ссылки внутри, следуя за плавающей точкой. Когда это происходит и определенные ссылки перемещаются, автоматическое закрытие переключается или «выключается», в результате чего нижний край контейнера контейнера внезапно переходит на дно неплавающего содержимого. Перемещение по другим ссылкам восстанавливает поведение. Этот интересный эффект, конечно, называется IE / Win Guillotine Bug , Переключение происходит только, когда: hover используется для изменения фона ссылки или многих других изменений стиля, таких как отступы, поля или любой стиль шрифта в ссылке. Как ни странно, изменение цвета текста при наведении курсора не приводит к ошибке. [ Как очистить поплавки без структурной разметки ]
• Ошибка IE Floating Floats : "Если вы используете блок div с полями, границами и количеством оставленных элементов с плавающей точкой, вы получите две ошибки отображения в IE Win. Одна: контейнер содержит только последнюю строку с плавающей точкой, и плавающие также работают вплоть до правого края, вплоть до правого края экрана, также вызывает горизонтальную полосу прокрутки на экранах многих размеров. [...] Решение: высота может быть задана для IE / win и не влияет на отображаемую высоту контейнера. Это возможно, потому что IE имеет другое нестандартное поведение, касающееся блоков и размеров. " Холли Хак: назначение высоты элементу, т.е. высота: 1% ;.
• Ошибка Win / IE6 Peekaboo : «Жидкостный ящик имеет плавающее внутри, и содержимое, которое появляется вдоль всплывающей стороны. В IE6 содержимое исчезает. Когда вы прокручиваете вниз или, возможно, переключаетесь в другое окно, после возвращения туда все это есть (эта давняя ошибка имеет был подавлен в IE7).
• «IE / Win дает левому плавающему блоку правое поле в 3 пикселя. Независимо от того, что вы делаете, поле все еще там. Чтобы увидеть это в действии, проверьте плавающая ошибка сначала, а затем двойное исправление "Эта ошибка также называется Трехпиксельная текстовая пробежка IE [ Плавающие ошибки ].
• IE дубликат ошибки персонажа : «В Internet Explorer 6 есть загадочная ошибка, связанная с несколькими всплывающими элементами; текстовые символы из последних всплывающих элементов иногда дублируются ниже последнего всплывающего элемента. Непосредственной причиной является не что иное, как обычные комментарии HTML, такие как <! - end левый столбец ->, зажатый между поплавками, которые идут последовательно. Исправлена ​​ошибка , [ IE дубликат ошибки персонажа ]
• «Одной из наиболее распространенных задач при размещении содержимого веб-страницы является перемещение изображений вправо или влево, чтобы текст обтекал их. Добавление прозрачного к плавающему изображению гарантирует, что каждое из них всегда будет находиться ниже предыдущего 1. Однако размещение свойств float и clear на одном и том же элементе может привести к появлению больших пробелов в Internet Explorer (IE) - пробелов, которые требуют более сложного CSS для исправления, чем те, которые мы использовали до сих пор. Исправление. " [Закрыть пробелы рядом с плавающими изображениями в Internet Explorer]
• «Вы помещаете левый поплавок в контейнер контейнера и используете левое поле на поплавке, чтобы оттолкнуть его от левой стороны контейнера. В Internet Explorer длина левого поля поплавка была удвоена!» [ IE удвоил ошибку с плавающей запятой ]
• «Показанная здесь ошибка приводит к тому, что встроенные элементы (изображения, текст), расположенные рядом с плавающим элементом div, кажутся отступами от их ожидаемого местоположения. Отступ вызван странной обработкой полей в плавающих элементах в IE / Win». [ Поплавки, поля и IE ]
• «Существует простое решение, которое исправляет многие ошибки в плавающих элементах IE. Все плавающие элементы становятся блок-блоком; стандарт гласит, что свойство display следует игнорировать для плавающих элементов, если только оно не указано как none. Если мы устанавливаем display: inline для плавающий элемент, некоторые из ошибок IE / Win исчезают, как по волшебству. IE / Win не превращает элемент в встроенный блок, но многие ошибки исправлены ". [Макеты с плавающей точкой]
• «Использование комбинации плавающих и отрицательных полей в элементе делает любые ссылки в элементе не щелкаемыми в Safari 1.3 и Safari 2.0. Текст также становится очень трудным для выбора, и если вы переходите по ссылкам, они исчезают, когда теряют фокус. Временное решение заключается в добавлении позиции: относительно объявления CSS для любых плавающих элементов с отрицательными полями. " [ Проблемы с плавающей точкой + отрицательная маржа в Safari ]
• «MSIE 7 теперь правильно реализует спецификацию W3C, свернув контейнеры, которые содержат плавающие дочерние элементы. Однако, так как она не реализовала сгенерированный контент, так называемые простой способ очистки не является опцией для очистки поплавков в MSIE 7. Метод переполнения является подходящим решением для всех версий Internet Explorer:

#content {переполнение: скрыто; высота: 1%; }

CSS Float Учебники и методы

• Правила с плавающей точкой в ​​браузере
  В таблице показано, какие правила заставляют контейнер очищать свои поплавки в каждом из основных браузеров.
• CSS вертикальное центрирование с использованием float и clear - crossbrowser «Окно остается в середине окна просмотра браузера. Содержимое не исчезает, когда окно просмотра становится меньше окна».
• Плавающий макет страницы Этот урок покажет вам, как создать макет страницы, как это , используя веб-стандарты и CSS. Такой макет может иметь любое количество применений, из которых фотогалерея является только наиболее очевидной. Страница, на которую я ссылаюсь, явно не закончена, я просто постарался сделать ее простой, чтобы мы могли сосредоточиться на макете изображений и текста.
• Создание лучшего веб-сайта с помощью понимания всплывающих элементов в CSS В этой статье дается краткое введение в эти всплывающие элементы, объясняются CSS-плавающие и четкие директивы и приводятся некоторые примеры того, как их можно использовать для лучшего позиционирования элементов HTML на веб-странице.
• Создание столбцов с плавающей точкой В общем, в настоящее время существует два способа создания многоколоночной разметки в CSS: абсолютное позиционирование или плавающее. Подавляющее большинство времени будет вашим выбором при размещении ваших веб-страниц с помощью CSS. В этом уроке вы узнаете, как создать внешний вид столбцов, используя свойства float, width и margin.
• Безопасные списки рядом с левосторонними элементами Существует множество различных способов форматирования хороших HTML-списков. Но надежны ли эти методы во всех контекстах и ​​во всех браузерах? В этой статье мы рассмотрим простой контекст: список с левым плавающим элементом рядом с ним.
• Создание жидких макетов с отрицательными полями [и с плавающей точкой] Я воспользовался возможностью, чтобы продемонстрировать недостаточно используемый аспект CSS: отрицательные поля. Отрицательные поля позволяют нам оттолкнуть область контента от сторон браузера, оставляя место для боковой панели.
• Изображение плавает, без переноса текста!
  Сколько раз вы оставляли изображение в блоке контента, но хотите, чтобы оно не обернулось вокруг вашего изображения?
• Плавающее изображение вправо
  Переместите изображение справа от блока текста и примените к нему границу.
• Плавающее изображение и подпись
  Переместите изображение и заголовок справа от блока текста и примените границы с помощью селекторов Descendant.
• Плавающая серия «четких: правильных» изображений
  Переместите серию изображений вниз по правой стороне страницы, с содержимым, текущим рядом с ними.
• Плавающая галерея миниатюр изображений
  Переместите серию миниатюрных изображений и подписей, чтобы получить галерею изображений.
• Плавающие кнопки «Вперед» и «Назад» с использованием списков
  Переведите простой список в ролловер «назад» и далее «кнопки».
• Плавающие встроенные элементы списка
  Переместите простой список, преобразовав его в горизонтальную панель навигации.
• Плавающая масштабируемая крышка
  Переместите масштабируемую заглушку влево, измените ее размер и отрегулируйте высоту линии в соответствии с вашими потребностями.
• Жидкостный двухколонный макет Перемещайте левую навигационную панель, чтобы получить макет из двух столбцов с верхним и нижним колонтитулами
• Жидкость три колонки макета Перемещайте левый и правый столбцы, чтобы получить макет из трех столбцов с верхним и нижним колонтитулами.
• CSS Float Html Tutorial Пришло время мыслить нестандартно, а может быть, точнее, плавать рядом с ним. Где мы потеряли наше коллективное творчество CSS-кодирования? CSS предоставляет столько свободы от традиционных макетов на основе таблиц, что мы иногда не рассматриваем альтернативы дизайна страниц и макетов. Как жаль. Время думать нестандартно!

Похожие

Комментарии