При правильном использовании float превращается в мощный инструмент вёрстки, применяемый для выравнивания и упорядочивания элементов. Однако чтобы держать этот инструмент под контролем, необходим противовес, без которого огромный потенциал float сужается до пары узких задач. Речь идёт об отмене обтекания с помощью разных методов. Перечислим несколько наиболее популярных.
Ширина элементов
Если обтекаемые элементы будет занимать всю доступную ширину, то остальные элементы, следующие за ними, будут начинаться с новой строки. Для этого суммарная ширина элементов должна равняться 100%. В примере 1 показано создание стрелок на одной строке.
Пример 1. Использование width
Каждый блок со стрелкой теперь занимает ширину 50% и в сумме они дают 100% ширины, поэтому абзац, идущий после arrow , начинается с новой строки.
Данный метод применяется редко, поскольку не всегда можно явно указать ширину элементов, к тому же метод не решает проблему с высотой блока и его фоном (рис. 1).
Рис. 1. Нет фоновой заливки
Использование overflow
Очистка float 2
Создайте веб-страницу, как показано на рис. 1. Для обозначения рубля используйте символ ₽.
Показать ответ
Ваш заказ
Продукт
Цена
Итого
Все HTML-элементы на веб странице располагаются в общем потоке, сверху вниз (для блочных элементов) и слева на право (для строчных элементов). Такой способ отображения мало эффективен, но благодаря CSS предоставляется возможность изменить дизайн в лучшую сторону.
Плавающие элементы
Когда вы определяете плавающий элемент, вам нужно расположить его в коде прямо под тем элементом, под которым он должен "плавать", всё остальное содержимое расположенное в коде под плавающим элементом будет обтекать его на веб-странице. Рассмотрим более подробно то, как браузеры загружают плавающие элементы и остальное содержимое на веб-страницу.
Cначала браузер загружает элементы на страницу в обычном порядке, двигаясь сверху вниз, когда он встречает плавающий элемент, то размещает его с указанной стороны. Браузер исключает этот элемент из общего потока, и в результате он "плавает" на странице.
Поскольку плавающий элемент был исключён из общего потока, то остальные блочные элементы, расположенные в коде после него, загружаются на страницу так, будто этого элемента там и не было. Обратите внимание, что блочные элементы располагаются под плавающим элементом, это происходит потому, что плавающий элемент больше не является частью общего потока.
Если вы внимательно посмотрите на рисунок, то увидите, что в отличие от блочных, при размещении строчных элементов или простого текста, расположенного внутри блочного элемента, учитываются границы плавающего элемента, поэтому строчные элементы и текст обтекают его.
Имейте ввиду, что в одном ряду можно размещать несколько плавающих элементов, если это позволяет ширина родительского элемента.
Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.
С помощью CSS свойства float картинка была сделана плавающей с левой стороны.
Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку
по правой и нижней стороне.
Для создания пустого пространства между картинкой и текстом, обтекающим ее, нужно добавить к картинке внешние отступы . Поскольку картинка смещена к левой границе родительского элемента, достаточно будет добавить внешние отступы только справа и снизу, чтобы слегка отодвинуть от нее текст:
Img { float: left; margin: 0 10px 10px 0; } Попробовать »
Отмена обтекания
Иногда требуется отобразить элемент таким образом, чтобы на него не влияли плавающие элементы, расположенные перед ним. Таким элементом к примеру может быть нижний колонтитул, который в любом случае должен отображаться под всеми остальными элементами страницы. Если у вас на странице высокое боковое меню, расположенное с левого края веб-страницы, то нижний колонтитул может подняться вверх и отображаться справа от него. Таким образом, вместо того, чтобы располагаться страницы, содержимое нижнего колонтитула появится на одном уровне с боковым меню. Данная проблема решается, с помощью свойства clear , которое сообщает браузеру о том, что стилизуемый элемент не должен обтекать плавающий.
Для CSS свойства clear можно установить одно из значений:
- left - плавающие элементы запрещены с левой стороны.
- right - плавающие элементы запрещены с правой стороны.
- both - плавающие элементы запрещены с обеих сторон.
- none - разрешает наличие плавающих элементов с обеих сторон.
С помощью свойства clear установлено, что плавающие элементы запрещены с правой стороны. Текст, расположенный ниже картинки, не будет обтекать картинку по левому краю.
Такое, увы, бывает очень часто - на подробное изучения какого-то предмета времени нет, а вот конкретную проблему решить надо...
К примеру, пришлось по работе скопи-пастить визуальный вид одной промо-странички. И понадобилось отключить обтекание текста для некоторых картинок. С таблицами возиться неохота - там было много картинок, пришлось искать решение через CSS.
И чтобы Вам не пришлось проделывать то же самое (искать, имеется в виду) - вот готовое решение.
как с помощью CSS отключить обтекание картинок текстом
Если мы просто возьмем, да и пропишем у тега с картинкой атрибут align="left" (выравнивание по левому краю), то нас ждет разочарование (как на верхнем примере на картинке). Текст, дойдя до края картинки, начнет ее обтекать (или "обволакивать", если по другому выразиться).
Но если для картинки прописать стиль style="float: left"
(т.е., тег картинки будет выглядеть как 
); а затем для текста, который рядом с картинкой (для параграфа) укажем стиль style="overflow:hidden;"
(
Вот как все выглядит на практике:
P.S. После того, как Вы отключите обтекание, то увидите, что текст прижимается прямо к картинке. Что, конечно же, не есть хорошо. Поправить это довольно просто - надо для текста (для параграфа) дописать стиль padding-left:10px; - ну, или сколько вы там пикселей (или пунктов, или процентов) хотите. Да и все дела.
Для примера добавим на страницу 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 запретить обтекание. Возможно, есть ещё способы для решения этой задачи, было бы интересно узнать. Пишите в комментариях, свои варианты.
