С 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).
