一.浮动（float）
块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以使块元素脱离文档流。可以使用float来使元素浮动，从而脱离文档流。
可选值：
none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面的左侧浮动
right，元素会立即脱离文档流，向页面的右侧浮动
1.当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下面的元素会立即向上移动。
2.元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到遇到父元素的边框或者其他的浮动元素。
3.如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。
4.浮动的元素不会超过他的兄弟元素，最多最多一边齐。
5.浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过设置文字环绕图片小果。
6.当元素设置浮动以后，会完全脱离文档流，块元素脱离文档流以后，高度和宽度都会被内容撑开。
7.开启span的浮动，内联元素脱离文档流以后会变成块元素。
二.清除浮动（clear）
由于受到box1浮动的影响，box2整体向上移动了100px，我们有时希望清除掉其他元素浮动对当前元素产生的影响，这是可以使用clear来完成功能。clear可以用来清除其他浮动元素对当前元素的影响。
可选值：
none：默认值，不清除浮动
left：清除左侧浮动元素对当前元素的影响
right：清除右侧浮动元素对当前元素的影响
both：清除两侧浮动元素对当前元素的影响（例如解决高度塌陷的问题）
三.简单布局
1.自动布局
通过之前box的学习、边距以及一些文档流和float的学习，可以做一个简单的web布局
2.自适应布局
这个= =emm，道行不深，日后在学！
四.高度塌陷问题
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素越多，父元素越高。但是当为子元素设置浮动以后需，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
所以在开发中一定要避免出现高度塌陷的问题
我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，简称BFC。
该属性可以设置打开或关闭，默认是关闭的。
当开启元素的BFC以后，元素将会具有如下的特性：
1.父元素的外边距不会和子元素重叠
2.开启BFC的元素不会被下面的元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC
1.设置元素浮动
使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素的display：inline-block
可以解决问题，但是也是会导致宽度丢失，不推荐使用这种方式。
4.将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
说了半天，总结一下就是，当出现高度塌陷问题的时候，在父元素加一个overflow：hidden的来解决。
另外说一下这个overflow兼容问题，在IE6及以下的浏览器中不支持BFC，所以使用这种方式不能兼容IE6。在IE6中虽然没有BFC，但是具有另一个隐含的属性叫hasLayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决这个问题。
开启的方式很多，我们直接使用一种副作用最小的：
直接将元素的zoom设置为1即可。（zoom：1；）
zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍。
zoom：1 ；表示不放大元素，但是通过该样式可以开启hasLayout
zoom这个样式，只在IE中支持，其他浏览器不支持。
好了，不要理这个zoom了。。。学了半天，不支持其他浏览器。
5.解决高度塌陷方案五(使用增加空白div清除浮动clear)：
可以直接在高度塌陷的父元素的最后，添加一个空白div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后再对其进行清除浮动clear，这样可以通过这个空白的div来撑开父元素的告诉，基本没有副作用。
使用这种方式虽然可以解决问题，但是会在页面中添加多余 的结构.
6.通过after伪类，直接在父元素后面添加一个内容
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果。
而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。
五.导航条练习
