Bootstrap和flex的比较，清除浮动的实现原理

bootstrap：栅格系统（结构）

在bootstrap中采用12栅格的布局，12份随意分配，但是不能解决5等分，7等分的问题。
bootstrap的优势之一就是可以根据用户屏幕尺寸调整页面，使其在各个尺寸上都变现良好。实现这个功能依赖两个东西，一个是view，另一个是max-width，min-width。

bootstrap栅格系统的本质是通过css3的媒体查询实现的，如果你熟练使用max-width等媒体查询属性的话就可以抛开bootstrap，定制属于自己的响应式网站。bootstrap将屏幕尺寸分为四类，超小屏幕<768px，小屏幕 平板>=768px，中等屏幕 桌面显示器>=992px，以及大屏幕 大桌面显示>=1200px。每一列又被平均分为了12格，每一格8.33333333%，12格就无限接近于100%。

这里要特别提一下就是bootstrap的盒模型，bootstrap强制把所有元素的盒模型都设置成了border-box，这是IE首创的，用于混杂模式下显示网页，但W3C认为这个属性是一个逗比一直没采用，后来发现自己才是逗比，因此在CSS3中新增了这个属性。border-box盒模型的尺寸包含了padding+border+content，content-box盒模型的尺寸仅仅包含content部分，设置padding，border还需要重新计算包含块尺寸，使用上要比border-box麻烦的多。

类前缀使用的是掌握栅格系统最重要的部分，类前缀分四个：超小屏幕 .col-xs-*，小屏幕 .col-sm-*，中等屏幕 .col-md-*，超小屏幕 .col-lg-*。

flex

任何一个容器都可以指定为Flex布局
块：display；行内：inline-flex（依然要加上浏览器前缀，存在兼容性问题）
display：flex；
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

Flexible boxes盒子按照宽高分出了以下 8 点：
水平的主轴：main axis； 垂直的纵轴：cross axis；
纵轴的开始位置和边框的交点：cross start； //上边
纵轴的结束位置和边框的交点：cross end； //下边
主轴的开始位置和边框的交点：main strat； //左边
主轴的结束位置和边框的交点：main end； // 右边
单个项目占据主轴的空间距离：main axis； // 子元素的宽
单个项目占据纵轴的空间距离：cross axis； // 子元素的高

容器属性设置
flex-direction：主轴的方向（即项目的排列方向）
flex-wrap：如果一条轴线排不下，如何换行
flex-flow：flex-direction属性和flex-wrap属性的简写
justify-content：定义了项目在主轴上的对齐方式
align-items：定义项目在交叉轴上如何对齐
align-content：多根轴线的对齐方式，一根轴该属性无效

项目的属性设置：以下6个属性设置在项目上
order：项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow：放大比例，默认为0-如果存在剩余空间也不放大
flex-shrink：缩小比例，默认为1-如果空间不足项目将缩小
flex-basis：在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

Bootstrap清除浮动的实现原理

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

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.clearfix {
    *zoom: 1;
}

① :after伪类在元素末尾插入了一个包含空格的字符，并设置display为table

display:table会创建一个匿名的table-cell，从而触发块级上下文（BFC），因为容器内float的元素也是BFC，由于BFC有不能互相重叠的特性，并且设置了clear:both，:after插入的元素会被挤到容器底部，从而将容器撑高。并且设置display:table后，content中的空格字符会被渲染为0*0的空白元素，不会占用页面空间。

content包含一个空格，是为了解决Opera浏览器的BUG。当HTML中包含contenteditable属性时，如果content没有包含空格，会造成清除浮动元素的顶部、底部有一个空白（设置font-size：0也可以解决这个问题）。

② :after伪类的设置已经达到了清除浮动的目的，但还要设置:before伪类，原因如下：
:before的设置也触发了一个BFC，由于BFC有内部布局不受外部影响的特性，因此:before的设置可以阻止margin-top的合并。这样做，其一是为了和其他清除浮动的方式的效果保持一致；其二，是为了与ie6/7下设置zoom：1后的效果一致（即阻止margin-top合并的效果）。

③ zoom: 1用于在ie6/7下触发haslayout和contain floats