Как сверстать веб-страницу. Часть 2 — Bootstrap

1. Существует правило, по которому все элементы с float желательно оборачивать элементом с так называемым clearfix — это хак, который «очищает поток», искусственно выставляет у контейнера с плавающими элементами высоту, равную высоте самого крупного из них. Без него контейнер будет иметь нулевую высоту (т.к. в нем нет статического содержимого), а это может привести к тому, что последующие за ним элементы как бы «протекут» внутрь него:
   
   jsfiddle.net/h2k3q/
   
   В случае Bootstrap то же самое: сеточные «колонки» .col.col-md-4 делаются на float, а для .row задается «micro clearfix» вида
   
   

   .row:before, .row:after{
       display: table;
       content: " "
   }
   

   
   
   Кроме этого, для .row также задаются отрицательные горизонтальные отступы, равные постоянному «зазору» сетки — это необходимо для создания «full-width layout», а в некоторых css-фреймворках (например, Foundation) для .row задается также max-width, что ограничивает ширину всей сетки, и выравнивание по центру (margin: 0 auto) — по сути, то же самое, что делает .container у Bootstrap.

2. Это обусловлено фреймворком?

   
   Скорее, это обусловлено структурой макета :) Но, как уже писал выше, от этих классов можно избавиться, используя миксины:
   
   

   {селектор для нужного "row"} > div{
       .make-md-column( 4 )
   }
   {селектор для нужного "row"} > div:not(:first-child){
       .make-md-column-offset( 1 )
   }
   

   
   

A nav element doesn't have to contain a list

In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.

1. (в пользу списков) — списки внутри nav делают верстку более структурированной и семантичной. Если буквально, то мы видим перед собой «список ссылок», следовательно, и верстаем его как список ссылок. Кроме того, со списками можно легко делать навигацию, если в ней есть вложенные подразделы.
   
2. (в пользу «listless» nav) — списки могут затруднять пользование сайтом людям с ограниченными возможностями, которые пользуются Screen Reader-ами (http://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/).
   

(...)

(1) semantics: at the UL JAWS pauses and announces that I’ve entered a list, it tells me at least that the next items go together; NAV is better but a list of links is not necessarily a navigation, (2) JAWS understands li tags as separate items and stops after reading each item, (3) more semantics: hierarchy is clear if one list is nested inside another (subnav) – JAWS announces nesting. For nested navigation/links, I would lean towards nested lists. (4) Not sure how people use this exactly, but JAWS does have a shortcut key that detects any lists on the page. Lists are more discoverable.