Використання: after для очищення плаваючих елементів

106

У мене є список, і у лі є float:left;. Вміст після <ul>слід правильно вирівняти. Тому я можу побудувати наступне:

http://jsfiddle.net/8unU8/

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

Але приклад не працює:

http://jsfiddle.net/EyNnk/

Чи завжди мені потрібно створити окремий роздільник, щоб очистити плаваючі елементи?

html css

— Торбен
джерело

261

Напишіть так:

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

Перевірте це http://jsfiddle.net/EyNnk/1/

— пісок
джерело

Ось як це зробити. але зауважте, будь ласка, пункт моєї відповіді про семантику.

— Олексій

2

Лише незначна інформація: ::afterз подвійною двокрапкою рекомендований спосіб орієнтації на псевдоелементи.

— Dennis98

11

Кожен браузер, який підтримує подвійну двокрапку (: :) Синтаксис CSS3 також підтримує лише синтаксис (:), але IE 8 підтримує лише двокрапку, тому наразі рекомендується просто використовувати одну крапку для кращої підтримки браузера. :: - це новіший формат з відступом для відмежування вмісту псевдо від псевдоселекторів. Якщо вам не потрібна підтримка IE 8, сміливо використовуйте подвійну двокрапку. css-tricks.com/almanac/selectors/a/after-and-before

— ретрориф

чому ми повинні ставити так: "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: block замість цього

— Cog

0

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

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

— Олексій
джерело

1

Це зовсім не семантика. 1) Ми завжди зрозуміли батьківський елемент, якщо його дитина плаває на ньому, наприклад, відповідно до вашої відповіді, якщо я хочу надати фон в UL, це не покриває LI, тому що UL не зрозуміло і 2) У мене питання, чому ви даєте зрозумілий Клас в окремому DIV перед P., якщо ви

— віддасте

0

Використовуйте

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

Наче подібне рішення, яке надає Роко. Це дозволяє вставляти / змінювати вміст, використовуючи: після та: перед псуедо. Детальніше перегляньте http://www.quirksmode.org/css/content.html

— сахін кумар
джерело