Очистка поплавков без отображения свойства - PullRequest
3 голосов
/ 19 ноября 2010

Я знаю, что метод старой школы для расчистки поплавков - это класс для ясности: и то, и другое, как правило, устарели.

Я знаю, что новый школьный метод - это ширина: 100%;переполнение: авто или скрыто;

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

Ответы [ 2 ]

2 голосов
/ 20 ноября 2010

Она права, я опубликовал более старую ветку в попытке консолидировать, но, согласно шаблону html5, это дефакто-код:

http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

.clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;  
} 

.clearfix:after { clear: both; }   
.clearfix { zoom: 1; }

Мы используем<br> здесь проясняется, так что я не в восторге от нового школьного стиля.К сожалению.

2 голосов
/ 20 ноября 2010

Есть два метода "новой школы".Один из них переполнен, а другой - clearfix.

новая школа # 1:

#el { 
   overflow:hidden; 
   zoom:1;
}

Значение чего-либо, кроме visible для переполнения, создает новый контекст форматирования блока, который приводит к автоматической очистке поплавков.

new school # 2:

#el:after { 
   content:"";
   clear:both;
   display:block;
}
#el { zoom:1; }

Clearfix в основном генерирует невидимый пробельный «элемент», который находится на уровне блока, и очищает область после элемента.Это замена CSS для вставки пустого div, который очищает вас.

Если вам нужен элемент, который выходит за границы, используйте # 2.В противном случае используйте # 1.zoom запускает hasLayout и заставляет el содержать float в пред IE7.IE7 + понимает overflow:hidden.

РЕДАКТИРОВАТЬ : Как указал Грилц, content: "\0020"; - это фактически новейшее значение свойства clearfix, если вы идете по этому маршруту.Существует ошибка рендеринга, связанная с пробелами, которую можно устранить, указав ее вместо точки, пустой строки или одной строки пробела.

...