bootstrap3 给很多元素设定前后伪元素 ，并设为display: table; content: " "; ，为什么？

Question

bootstrap3 一部分源码：

.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: " ";
}

可以看到 .container .row .nav 这种常见的元素都被这样设定了，不知道为什么这么做？

Answer 1

clearfix

https://github.com/twbs/bootstrap/blob/master/less/mixins/clearfix.less

Answer 2

清除浮动啊！