Ясное исправление HTML не работает в хроме?

Question

Я создал this simple html:

есть 2 SPANs здесь.

один должен быть ниже другого, очищая поплавок.

bbb элемент имеет float:left

И я (на aaa элемента), "clearfix" CSS Facebook, которая является:

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

.clearfix { zoom: 1; } 

Это действительный путь (как facebook do) и как described here

Однако он работает в F ireFox: (смотри вышеприведенное изображение)

Но в хроме (v 24) это не так.

Что мне не хватает?

Answer 1

Ваш jsbin пример имеет две опечатки/ошибки синтаксиса и код clearfix не является правильным.

1. <span class=" clearfix"> у вас есть пробел перед clearfix
2. <span class='fll'>bbbbb </span> у вас есть одиночные кавычки вместо двойных кавычек.

Изменить HTML на:

 <div class="clearfix">aaa </div> 
     <div class="fll">bbbbb </div> 

и ваш CSS для:

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-table; } 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 

и он работает (все браузеры, IE6-7 включены) http://jsbin.com/ukaxav/19/

Answer 2

.clearfix { display: block; } 

Разве это не «бит» более чистый?

Answer 3

добавить дисплей: встроенный блок; свойство родительскому div.

Код:

<div style="height: 100%; border: 1px solid blue;display: inline-block;"> 
<span class=" clearfix" style="">aaa </span> 
<span class="fll">bbbbb </span> 
</div> 

Answer 4

Clearfix предназначен для очистки поплавков. значение, на элемент, который содержит float. Не для очистки предыдущих поплавков. Так что в своем вопросе вы не ставите clearfix на правильное место или не понимаете принцип.

Answer 5

Добавить width: 100%; в вашем fll

так,

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

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

.clearfix { zoom: 1; } 

.fll 
{ 
    float:left; 
    width: 100%; 
}