Использование: после для очистки плавающих элементов

106

У меня есть список, и у меня есть float:left;. Содержимое после <ul>должно быть правильно выровнено. Поэтому я могу построить следующее:

http://jsfiddle.net/8unU8/

Я подумал, что могу удалить <div class="clear">с помощью псевдоселекторов, например: after.

Но пример не работает:

http://jsfiddle.net/EyNnk/

Всегда ли мне нужно создавать отдельный div для очистки плавающих элементов?

html css Торбен
источник

Ответы:

261

Напишите так:

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

Отметьте это http://jsfiddle.net/EyNnk/1/

Sandeep
источник
Вот как это сделать. но обратите внимание на мой ответ о семантике.
Alex
2
Небольшая информация: использование ::afterдвойного двоеточия - это рекомендуемый способ нацеливания на псевдоэлементы.
Dennis98
11
Каждый браузер, поддерживающий синтаксис с двойным двоеточием (: :) CSS3, также поддерживает только синтаксис (:), но IE 8 поддерживает только одинарное двоеточие, поэтому на данный момент рекомендуется просто использовать одинарное двоеточие для лучшей поддержки браузером. :: - это новый формат с отступом, позволяющим отличать псевдосодержание от псевдоселекторов. Если вам не нужна поддержка IE 8, используйте двойное двоеточие. css-tricks.com/almanac/selectors/a/after-and-before
retroriff
зачем нам писать: "content: ''; display: block;" ? а что, если вам нужна встроенная оболочка?
Lucke
6

Нет, вам недостаточно сделать что-то вроде этого:

<ul class="clearfix">
  <li>one</li>
  <li>two></li>
</ul>

И следующий CSS:

ul li {float: left;}


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

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
}
паника
источник
5

Это тоже сработает:

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 

.clearfix:after {
    clear: both;
}

/* IE 6 & 7 */
.clearfix {
    zoom: 1;
}

Дайте класс clearfixна родительский элемент, например , ваш ulэлемент.

Источники здесь и здесь .

Махди
источник
1
display: table может добавлять дополнительный интервал; Вместо этого я использую display: block
The Cog
0

Текст «дасда» никогда не будет внутри тега, верно? Семантически и чтобы HTML был правильным, просто добавьте к нему класс clear:

http://jsfiddle.net/EyNnk/2/

Alex
источник
1
Это вообще не семантика. 1) Мы всегда очищаем родительский элемент, если его ребенок имеет плавающий на нем, например, в соответствии с вашим ответом, если я хочу указать фон в UL, он не охватывает LI, потому что UL не ясен и 2) У меня вопрос, почему вы даете ясно Класс в отдельном DIV перед P., если вы
отдаете
0

Использовать

.wrapper:after {
    content : '\n';
}

Очень похоже на решение, предоставленное Roko. Он позволяет вставлять / изменять контент, используя: after и: before psuedo. Подробнее см. Http://www.quirksmode.org/css/content.html.

сачин кумар
источник