盒子与浮动
在css编写中，布局有时候会是一个重要的问题，而浮动又是布局中的一个重要组成部分
浮动是脱离文档流，所谓流，大概意思就是像河流一样顺序而排，就像多个div排列一样，有时候我们需要一行有多个div，这时候就要用到浮动。
将其中一个div浮动以后，剩下的div会重新组成个文档流（需要注意的是，后面代替前面的div，不会改变原有样式）
将其中的一个div元素浮动后，他会有更高的显示，从而可能挡住下一个div元素
那么上一个元素浮动后，结论是下一个元素会跟在他的后面显示
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
发现上边的元素div1是标准流中的元素，因此div2的相对垂直位置不变，顶部仍然和div1元素的底部对齐。由于是左浮动，左边靠近页面边缘，所以左边是前，因此div2在最左边。
有了浮动以后，我们还要清除浮动，这样才可以更好展示页面
有了上面的步骤，我们就更好的理解了
总的来说，就是浮动把几个div放到一行，而清除浮动就是固定位置，从而做一些导航栏
清除浮动可以理解为打破横向排列。
清除浮动的关键字是clear，官方定义如下：
语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
左边不允许出现浮动元素，这样div2就被迫下移一行。
盒子模型有几种模式？
1、W3C标准盒子模型
2、IE盒子模型
W3C标准盒子模型
标准模式下，一个块的宽度 = width+padding(内边距)+border(边框)+margin(外边距)；
W3C模型中：
CSS中的宽（width）=内容（content）的宽
CSS中的高（height）=内容（content）的高
IE盒子模型
怪异模式下，一个块的宽度 = width+margin(外边距) （即怪异模式下，width包含了border以及padding）。
IE模型中：
CSS中的宽（width）=内容（content）的宽+（border+padding）*2
CSS中的高（height）=内容（content）的高+（border+padding）*2
————————————————
