Css обтекание отменить: Очистка float | WebReference

Leave a Comment / Css / By /

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример верстки</title>
<style>
     .container {border:1px solid black;}
     div {float:left;}
     .el-1 {width:200px; height:120px; background: yellow;}
     .el-2 {width:120px; height:100px; background: pink;}
     .main {background: orange; height:50px;}
</style>
</head>

<body>
<section>
     <div></div>
     <div></div>
</section>
<section></section>
</body>
</html>

Мы хотим, чтобы высота контейнера . 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 верстке:

<section>
  <div>Я обтекаемый</div>
  <div>И я обтекаемый...</div>
  <br>
</section>
 
<section>
  Браво, вам удалось отменить обтекание
</section>

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

Если вас не волнует схлопывающийся контейнер, а только неправильно расположенный блок . main, то вы можете также поместить «очищающий поток» элемент br после контейнера. Но, если вы решите сделать так, то гораздо проще будет просто добавить свойство 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:

<section>
  <div>Я обтекаемый</div>
  <div>И я обтекаемый...</div>
</section>
 
<section>
  Браво, вам удалось отменить обтекание
</section>

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

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

. clearfix:after {
  content: "";
  display: table;
  clear: both;
}

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

Спецификация W3C добавила новое значение для свойства min-height (и для других свойств min/max), для решения этой проблемы. Выглядит оно так:

.container {
  min-height: contain-floats;
}

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

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

html — Отменить обтекание текстом input-а при условии ‘мешающего’ TextNode

Вопрос задан

6 лет 2 месяца назад

Изменён 6 лет 2 месяца назад

Просмотрен 455 раз

Есть следующая конструкция (генерируемая без моего участия):

<span>
  <span>
    <input type="checkbox" name="property[]" value="val1">
    &nbsp;
    <span>Пояснение к чекбоксу</span>
  </span>
</span>

Необходимо убрать обтекание чекбокса текстом, чтобы было как здесь: http://xiper. net/collect/html-and-css-tricks/content/overflow-and-orphans

Способ из ссылки выше работал бы, если бы не мешающий &nbsp;. Есть ли способ справиться с этим? Желательно чистый CSS, без JavaScript.

  • html
  • css

1

Вариант 1 задать отрицательный верхний отступ на величину размера высоты строки:

input {
  display: block;  
  width: 20px; /*задайте свое необходимое значение */
  float: left;
}

.class3 {
    display: block; 
    overflow: hidden;
    margin-top: -16px; /*высота строки */
}
<span>
  <span>
    <input type="checkbox" name="property[]" value="val1">
    &nbsp;
    <span>Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу</span>
  </span>
</span>

Вариант 2 position: absolute к input:

. class2 {
  position: relative;
  padding-left: 20px;
  display: block;
}

input {
  display: block;
  width: 20px;
  position: absolute;
  left: 0;
  top: 0;
}
<span>
  <span>
    <input type="checkbox" name="property[]" value="val1">
    &nbsp;
    <span>Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу</span>
  </span>
</span>

Вариант 3 flex:

.class2 {
  display: flex;
}

input {
  display: block;
  width: 20px;
}
<span>
  <span>
    <input type="checkbox" name="property[]" value="val1">
    &nbsp;
    <span>Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу Пояснение к чекбоксу</span>
  </span>
</span>

6 

input{display: inline-block; float: left;  width: 20%;}
. class2{width: 400px;display: block;}
.class3{display: inline-block;width: 77%; float:left}
<span>
  <span>
    <input type="checkbox" name="property[]" value="val1">
    &nbsp;
    <span>Пояснение к   к чекбоксуПоясне ние к чекб оксуПоясн ение к чек бок  уПоясне ние  к чекбок уПояснение к чек боксуП ояснение  к чекбоксуПояснение к чекбоксуПояснен ие к чекбоксуПоясн ение к чекбоксуclass2</span>
  </span>
</span>

Типа такого?

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как удалить перенос слов из текстовой области?

спросил

Изменено 1 год, 11 месяцев назад

Просмотрено 148 тысяч раз

моя простая текстовая область не показывает горизонтальную полосу, когда текст переполняется. Он переносит текст для новой строки. Итак, как удалить перенос слов и отобразить горизонтальную полосу, когда текст переполняется?

  • html
  • текстовая область
  • перенос слов

2

 текстовая область {
  пробел: предварительно;
  перелив: обычный;
  переполнение-x: прокрутка;
}

white-space: nowrap также работает, если вы не заботитесь о пробелах, но, конечно, вы не хотите этого, если вы работаете с кодом (или абзацами с отступом или любым содержимым, где может быть преднамеренно несколько пробелов ) … поэтому я предпочитаю до .

overflow-wrap: нормальный (был word-wrap в старых браузерах) необходим на случай, если какой-то родитель изменил эту настройку; это может привести к переносу, даже если установлено до .

также — вопреки принятому в настоящее время ответу — текстовые области часто переносят по умолчанию. pre-wrap кажется по умолчанию в моем браузере.

9

Текстовые области не должны переноситься по умолчанию, но вы можете установить wrap=»soft» для явного отключения переноса:

РЕДАКТИРОВАТЬ: Атрибут «обертка» официально не поддерживается. Я получил его с немецкой страницы SELFHTML (английский источник здесь), где написано, что IE 4.0 и Netscape 2.0 его поддерживают. Я также протестировал его в FF 3.0.7, где он работает как положено. Здесь все изменилось, SELFHTML теперь является вики, а ссылка на английский источник мертва.

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

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

Отсюда (кажется, отличная страница с информацией о текстовом поле).

EDIT3: я не уверен, когда он изменился (согласно комментариям, это должно быть около 2014 года), но wrap теперь является официальным атрибутом HTML5, см. w3schools. Изменен ответ, чтобы соответствовать этому.

15

У меня работает следующее решение на основе CSS:

 
 <голова>
  <тип стиля='текст/css'>
   текстовая область {
    пробел: nowrap;
    переполнение: прокрутка;
    переполнение-y: скрыто;
    переполнение-x: прокрутка;
    переполнение: -moz-полосы прокрутки-горизонтальные;
   }
  
 
 <тело>
  <форма>

0

Я нашел способ сделать текстовое поле со всем этим работающим одновременно:

  • С горизонтальной полосой прокрутки
  • Поддержка многострочного текста
  • Текст не переносится

Хорошо работает на:

  • Chrome 15. 0.874.120
  • Firefox 7.0.1
  • Опера 11.52 (1100)
  • Сафари 5.1 (7534.50)
  • ИЭ 8.0.6001.18702

Позвольте мне объяснить, как я к этому пришел: я использовал встроенный инструмент инспектора Chrome и увидел значения в стилях CSS, поэтому я пробую эти значения вместо обычных… методом проб и ошибок, пока не уменьшу их до минимума и вот это для тех, кто хочет.

В разделе CSS я использовал только это для Chrome, Firefox, Opera и Safari:

 textarea {
  белое пространство: nowrap;
  переполнение: прокрутка;
}

В разделе CSS я использовал только это для IE:

 textarea {
  переполнение: прокрутка;
}

Это было немного сложно, но есть CSS.

Тег (x)HTML, подобный этому:

И в конце секции такой JavaScript:

 window.onload=function(){
   document.getElementById("myTextarea").wrap='off';
 }

JavaScript предназначен для того, чтобы валидатор W3C передал XHTML 1. 1 Strict, поскольку атрибут wrap не является официальным и, следовательно, не может быть тегом (x)HTML напрямую, но большинство браузеров обрабатывают его, поэтому после загрузки страницы он устанавливает этот атрибут.

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

4

Этот вопрос кажется самым популярным для отключения переноса текстовой области . Однако по состоянию на апрель 2017 года я обнаружил, что IE 11 (11.0.9600) , а не отключит перенос слов с помощью любого из вышеуказанных решений.

Единственное решение , которое работает для IE 11, — это wrap="off" . wrap="soft" и/или различные атрибуты CSS, такие как white-space: pre , измените, где IE 11 выбирает перенос, но он все еще куда-то переносится. Обратите внимание, что я тестировал это с 9 или без него.0039 Просмотр совместимости . IE 11 вполне совместим с HTML 5, но не в этом случае.

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