* {

    box-sizing: border-box

}

一开始我并没有注意到这个关键点，因此之前布局所设置的padding，margin属性值全都不适用了。之后对比两者之间的区别，才对border-box和content-box有了更进一步的理解。

正常盒模型，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box，它也是标准 w3c 盒子模型。

正常盒模型是指：盒模型的大小包括content，padding，border，并且先做content.。

正常盒模型的大小会以内容优先自动扩展，内部子元素超过父元素给定的大小，会将父元素撑大。

怪异盒模型，是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。

怪异盒模型是先做盒。然后添加border，padding，最后做content。即保证盒模型优先，先做盒再放内容，不管内容是否放得下。

更通俗的说，怪异盒模型中，父元素的盒模型确定，子元素是无法撑开父元素的盒模型，只能在盒模型剩余空间展示。

2、对清除浮动的运用还不是很熟练

在之前写布局中，我不是很喜欢用浮动布局，常用flex或者定位来布局，所以对清除浮动的各种方式还掌握得不够，这次去除bootstrap的栅格系统之后，在用浮动进行响应式布局的时候会有一些不顺手，以后对自己薄弱的地方加强学习。

✦ 浮动的三个特点很重要。

1. 脱离文档流。

2. 向左/向右浮动直到遇到父元素或者别的浮动元素。

3. 浮动会导致父元素高度坍塌。

✦ 解决父元素高度坍塌的方式就是清除浮动，常规的方法是clear清除浮动和BFC清除浮动。

我喜欢用伪元素来清除浮动

.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

收获：

脱离bootstrap之后，发现了自己一些不够熟悉，理解不深刻的地方，算是一次查漏补缺