Как лучше использовать clearfix в sass?

Question

[Zhachek]

Очень хочу разобраться раз и навсегда с clearfix-ом, который не дает мне спать спокойно :D
Вопросы следующие:
1) Какой лучше использовать clearfix в saas:

@mixin clr {
	&:after, &:before {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
		*zoom: 1;
	}
}

или

@mixin clr {
	&:after {
		content: " ";
		display: table;
		clear: both;
		*zoom: 1;
	}
}

2) Каким методом использовать: миксином, екстендом или плейсхолдером
3) В каких случаях использовать overflow:hidden, в каких clearfix ?
4) Предположим есть разметка:

<header>
	<nav>
		<ul>
			<li><a href="">Пункт1</a></li>
			<li><a href="">Пункт2</a></li>
			<li><a href="">Пункт3</a></li>
		</ul>
	</nav>
</header>

Если я флочу li, clearfix ставлю для ul, мне nav и header тоже нужно клеарфиксить ?
Смотрел на разных сайтах, гуглил, все все по разному делают, а меня интересует, как ПРАВИЛЬНО нужно делать. Заранее спасибо )

Answer 1

[Денис Малиночкин]

С Sass работаю редко, но на Less у нас с вами ситуация похожая, ибо это всё тот же CSS.

1) Сейчас самый популярный clearfix имеет вид:

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

2) Как вам удобно. Я лично, использую как extend. Да и вообще использую его только для clearfix.
3) На эту тему была статья на Хабре. Главное, чтобы было удобно разработчику.
4) В вашем примере clearfix нужен только для ul. Если же ul или nav тоже плавают, то и их родителю тоже нужен clearfix. То есть, если ul плавает, то clearfix у nav, если nav плавает, то у header. Если плавает li и ul, то clearfix можно указывать только у nav (хотя лучше указывать и у ul и у nav).

Comments

[Zhachek]

Спасибо за ответ, просто когда я флоачу ul у меня всегда nav остается схлопнувшимся, а меня, почему то, напрягают элементы без высоты )

[Денис Малиночкин]

Zhachek: Загляните сюда: jsbin.

Зеленый - это nav
Синий - это ul
Белый - это li

[Zhachek]

Сейчас проверил везде и все нормально, походу у меня просто браузер заглючил

[dpismenny]

Достаточно такого:

.whatever:after{
	content: "";
	display: block;
	clear: both;
}

Answer 2

[Андрей Б.]

Батенька, да вы страдаете нездоровым перфекционизмом. =)

1)
clearfix у меня такой

.cf:before, .cf:after
	content ""
	display table
.cf:after
	clear both

IE? не неслышал

2) Да как удобно лично тебе, всем пофиг.
3) См пункт №2. Только помни, что при overflow содержимое обрежется, если оно вылезает.
4) Нет

Спи спокойно =)