Question

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

Answer 1

1、 每列实际上是没有间距的，是每个col类自身携带了左右padding值，看上去是有左右间距的。
2、栅格系统阈值计算
lg为 min-width：1200px
md为min-width：992px
sm为min-width：768px
xs为最小width时宽度计算都按照一定的比例计算，无阈值。
3、其中的栅格列都使用了position:relative定位，relative是脱离了文档流，它的定位是依据父级的原始点为原始点定位，虽然脱离文档流，但是还是占用文档流的位置，如果要彻底脱离文档流，就使用position:absolute，或者position:fixed
4、bootstrap的clearfix
出处：http://www.cnblogs.com/justany/archive/2013/11/19/3430388.html
我一直以为Bootstrap的LESS源代码精髓在mixins.less，所以这个系列主要也是讲解mixins.less的。

什么是mixins？
混入，或者翻译成混合。官网的说法是：我们可以定义一些通用的属性集为一个 class，然后在另一个 class 中去调用这些属性。
看起来非常难理解，没事，我们来看例子，比如有这样一个class：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

那如果我们现在需要在其他 class 中引入那些通用的属性集，那么我们只需要在任何 class 中像下面这样调用就可以了：

#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}

编译后，.bordered class 里面的属性样式都会在 #menu a 和 .post a 中体现出来：

#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

在 LESS 中，我们还可以还可以像函数一样定义一个带参数的属性集合：
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

然后在其他 class 中像这样调用它：

#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}

如果想详细了解混入，请查看官方文档：http://www.lesscss.net/article/document.html

举个栗子
Bootstrap 3.0中有许多有用的混入函数，第一个无疑是clearfix函数。clearfix是用来清除浮动的。
但是，为什么要清除浮动呢？
如果父元素只包含浮动元素，那么它的高度就会塌缩为零。 形象的说，既然是浮动元素，那么其父级元素就觉得他们都是飘在我上面的玩意，没有占据我的空间，所以高度就塌陷为零了。这时候我们清除浮动，告诉父级元素，你需要包含这些浮动的元素，然后他就被撑开了。
常见的清除浮动技术是这样的：

.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearxi {
*zoom: 1;
}

不过Boostrap的更容易记：

.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}

如果要兼容IE6和IE7则加上：
.clearfix {
*zoom: 1;
}

值得注意Bootstrap使用的技术不支持Firefox 3.5以下版本。

追问

.clearfix:after中为什么设置display: table，而不是display:block？？？