bootstrap row pseudo elements usage

Question

Im wondering and dont know the answer for Bootstrap Grid row using Display:table and content:"" for their pseudo elements(after and before) . Why it is using display table there .

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

Can anyone explain why they using ?

Answer 1

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

This is supported by all browsers except for IE(6/7). It generates a pseudo-element before and after the content of the element that contains floats. Setting display: table creates an anonymous table-cell and a new block formatting context. This acts to prevent top-margin collapse and improve the consistency between modern browsers and IE(6/7).