Css убрать обтекание блока. Частичная отмена float в CSS. Проблемы с плавающими элементами

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

Плавающие элементы

Когда вы определяете плавающий элемент, вам нужно расположить его в коде прямо под тем элементом, под которым он должен "плавать", всё остальное содержимое расположенное в коде под плавающим элементом будет обтекать его на веб-странице. Рассмотрим более подробно то, как браузеры загружают плавающие элементы и остальное содержимое на веб-страницу.

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

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

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

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

Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.

С помощью CSS свойства float картинка была сделана плавающей с левой стороны. Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку по правой и нижней стороне.

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

Img { float: left; margin: 0 10px 10px 0; } Попробовать »

Отмена обтекания

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

Для CSS свойства clear можно установить одно из значений:

• left - плавающие элементы запрещены с левой стороны.
• right - плавающие элементы запрещены с правой стороны.
• both - плавающие элементы запрещены с обеих сторон.
• none - разрешает наличие плавающих элементов с обеих сторон.

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

Для примера добавим на страницу HTML код, который будет включать в себя три блока обвертки и три пронумерованных блока внутри:

Теперь укажем общие стили им:

Container1, .container2, .container3{ width: 70%; margin: 15px auto 0; background-color: #CCFFCC; border: 2px solid #ccc; padding:20px; } .block1, .block2, .block3{ padding-top: 35px; text-align: center; font-size: 28px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); background-color: #CCCCFF; height: 65px; width: 100px; }

В итоге получится вот такая картина:

Преминем к пронумерованным блокам свойство float:

Block1, .block2, .block3{ float: left; }

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

Это распространённый вариант, и я им раньше часто пользовался, хотя, на мой взгляд, он и не самый лучший. Согласитесь, когда продумываешь разметку для HTML страницы, то не хочется использовать лишние элементы, не вписывающиеся в логику.

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

Container2{ overflow: auto; }

Третий способ, по моему мнению, самый оптимальный. Он обладает достоинствами первого и второго способов: отсутствием ненужных элементов и использованием свойства clear. Для его реализации необходимо воспользоваться псевдо элементам after. При помощи него можно сымитировать элемент div. Чтобы увидеть его укажем фон и высоту изменим с 0 до 2px.

Container3:after{ content: ""; display: block; clear: both; height: 2px; background-color: #000; }

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

Отмена обтекания блоков (float) наиболее часто встречающаяся операция при верстке HTML страниц. Мы рассмотрим все известные способы отменить действие CSS свойства float.

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

Типичный случай HTML верстки

Блоки .el-1 и .el-2 размещаются бок о бок внутри контейнера .container , и один элемент .main следует после .container :

Мы хотим, чтобы высота контейнера .container была равной высоте самого длинного из его дочерних элементов (т.е. либо .el-1 , либо .el-2 ) и чтобы блок .main , чтобы был после блока .container .

А вот, что мы видим: .container (черная рамка) схлопнулся, как будто в нем ничего нет, блок .main (блок с рыжим фоном) находится под блоком .container , как мы и хотели, но при этом он прячется за блоки .el-1 (с желтым фоном) и .el-2 (с розовым фоном). Черт знает что! Видел бы это мой начальник - непременно сказал бы мне,- "Используй, Шурик, табличную верстку" . К счастью, времена, когда web-страницы верстались таблицами уже давно прошли и мы отлично обойдемся и без них. Не верите? Читайте дальше.

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

Способ 1: метод старой школы

Как вам известно, CSS свойство clear устанавливает с какой стороны элемента запрещено его обтекание другими элементами, следовательно это свойство может предотвратить налезание элементов поверх плавающих. Идея заключается в следующем: вставьте пустой элемент, который свойство clear под обтекаемыми блоками. Это использовать определенный класс для подобного элемента - давно устоявшаяся традиция, так что вы можете использовать его в вашем HTML. Вот классический CSS код:

Clear { clear: both; }

Который применим к нашей HTML верстке:

Наш демо-пример, реализуемый с помощью этого метода:

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

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

Способ 2: свойство overflow

Используя свойство overflow в теге .container , мы можем заставить контейнер расшириться до высоты размещенных элементов. Наш CSS будет выглядеть следующим образом:

Container { overflow: hidden; /* или "auto" */ }

Наш HTML останется таким же, каким и был изначально, без дополнительных элементов. Вот, что мы получим в итоге:

К сожалению, у этого метода есть недостаток: любой дочерний элемент, который выступает за пределы контейнера, будет либо обрезан (в случае overflow: hidden;), либо вызовет появление полос прокрутки (в случае overflow: auto;).

Способ 3: класс “clearfix”

Мы создаем класс .clearfix с псевдо-элементами ::before и ::after и задаем им display: table , что создает анонимную ячейку таблицы. Этот класс будет использоваться для очищения плавающих элементов. CSS код выглядит так:

Clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; /* ie 6/7 */ }

Изменим немного HTML код добавив к классу container класс clearfix :

Вот результат работы наешго новвого класса:

если вам не нужна поддержка браузеров ниже IE8, то наш код значительно сократится:

Clearfix:after { content: ""; display: table; clear: both; }

Способ 4: значение contain-floats для min-height

Container { min-height: contain-floats; }

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

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

Довольно часто перед верстальщиком ставятся определенные нестандартные задачи. Наша цель – предложить наиболее рациональное и правильное решение. Сегодня речь пойдет об особенностях обтекания текстом изображения.

Постановка задачи

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

Рассмотрим тот случай, когда обтекание текстом не требуется. Причем предлагаю универсальный вариант – при отсутствии картинки текст растягивается на всю ширину блока (не все же Ваши статьи будут сопровождаться иллюстрациями). Ширина блока с текстом строго не фиксирована. Ниже показано, как должен будет выглядеть наш блок.

Правильное решение

Для реализации поставленной задачи создаем два блока: один для картинки, второй – для текста. С учетом того, что под картинкой может располагаться еще какие-либо элементы, для картинки мы создаем отдельный контейнер, в противном случае этого не требуется, можно просто присвоить тегу с изображением необходимый класс.

HTML

< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" > Текстовый блок

Display: inline; }

Это стандартное решение для текста, который будет обтекать блок с картинкой. Выглядеть это будет следующим образом:

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

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

Следующим неплохим вариантом будет предложение воспользоваться свойством margin-left . Так как для блога, скорее всего, все картинки в данном блоке будут унифицированы по размерам, то решение в принципе не плохое и действенное. Однако это всего лишь частный случай, так как при отсутствии картинки в статье слева будет просто пустая полоса. Это нас не устраивает. Мы же ищем универсальное решение!

А самое правильно решение, как часто бывает, является наипростейшим. Чтобы достичь нужного форматирования текстового блока – необходимо обратиться к свойству overflow со значением hidden . Не забываем про неповторимый Internet Explower. Он как обычно выделывается и требует дополнительного внимания! Чтобы наш старичок нормально отработал добавляем текстовому блоку свойство float (после обращения к свойству overflow определение фиксированной ширины не потребуется).

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

Image { float: left; /*обтекание */ margin: 10px; /*внешний отступ для красоты */ display: inline; /* для IE6, чтоб отступ слева не удвоился */ } . text{ overflow: hidden; float: left; }

Недостатки метода и альтернатива

Несмотря на простоту и универсальность метода, заключающегося в применении оverflow:hidden , есть один недостаток. Свойство перестанет выполнять свои функции, если в текстовой части будут использоваться выпадающие элементы.

В этом случае потребуется альтернатива для настройки нужного форматирования. Эта методика будет основываться на функционале комбинации display:table-cell; . Это решение такое же действенное, но слегка уступает в простоте первому способу. При обращению к этому методу также необходима установка layout для работы в среде Internet Explower

Img { float: left; /* задаем обтекание */ margin: 10px; /* отступ для красоты */ display: inline; /* для IE6, чтоб отступ слева не удвоился */ } . text{ display: table- cell; zoom: 1 ; /* Осторожно! Строка невалидна */ }

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

В каких браузерах работает?

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

Что такое "float"?

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

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

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

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

#sidebar { float: right; }

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

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

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

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

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

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

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

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

#footer { 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 :

Clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

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

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

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

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

Плавающие элементы часто ругают из-за их хрупкости. Большая часть этой хрупкости идёт от 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 ) потомка.

Главная » ОС+Активаторы » Css убрать обтекание блока. Частичная отмена float в CSS. Проблемы с плавающими элементами