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

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

http://jsfiddle.net/8unU8/

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

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

http://jsfiddle.net/EyNnk/

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

<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%;
}

Ответ 3

Это также будет работать:

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

.clearfix:after {
    clear: both;
}

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

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

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

Ответ 4

Текст "dasda" никогда не будет находиться в теге, не так ли? Семантически и чтобы быть корректным HTML это как быть, просто добавьте ясный класс к этому:

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

Ответ 5

Использование

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

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