Зачем еще нужен блок с классом row в bootstrap?

Привет.

Вопросы по bootstrap. Исходный код:

<div class="container">
    <h1>HEADING</h1>
    <div class="row">
        <p class="col-md-4">Some text.........</p>
        <p class="col-md-4">Some text.........</p>
        <p class="col-md-4">Some text.........</p>
    </div>
</div>

1. Посмотрел в девтулс и увидел, что элемент с классом row имеет margin-left:-15px и margin-right:-15px, которые позволяют компенсировать padding-left:15px у левого элемента и padding-right:15px у правого элемента, которые имею класс, например, col-md-4

В данном примере в container лежит блок row, в котором ВСЕ ТРИ параграфа плавающие. Чтобы блок row не «схлопнулся», у него создан псевдоэлемент

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

У каждого псевдоэлемента задано clear: both – чтобы не давал схлопнуться блоку с классом row. Не понятно то, зачем ПЕРЕД параграфами ставить псевдоэлемент. ПОСЛЕ зачем стоит – это понятно, схлопнуться блоку row не дает. Зачем у каждого псевдоэлемента задано display: table? Зачем еще нужен блок с классом row?

2. Зачем блоку с классом container заданы псевдоэлементы before и after?