一.浮动（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布局

web简单布局

2.自适应布局

这个= =emm，道行不深，日后在学！

四.高度塌陷问题

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素越多，父元素越高。但是当为子元素设置浮动以后需，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

所以在开发中一定要避免出现高度塌陷的问题

我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

高度塌陷

根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，简称BFC。

该属性可以设置打开或关闭，默认是关闭的。

当开启元素的BFC以后，元素将会具有如下的特性：

1.父元素的外边距不会和子元素重叠

2.开启BFC的元素不会被下面的元素所覆盖

3.开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC

1.设置元素浮动

使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题

设置float，导致父元素宽度丢失

2.设置元素绝对定位

3.设置元素的display：inline-block

可以解决问题，但是也是会导致宽度丢失，不推荐使用这种方式。

inline-block

4.将元素的overflow设置为一个非visible的值

overflow：hidden

推荐方式：将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来撑开父元素的告诉，基本没有副作用。

增加空白div，用清除浮动float，解决高度塌陷

使用这种方式虽然可以解决问题，但是会在页面中添加多余 的结构.

6.通过after伪类，直接在父元素后面添加一个内容

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果。

而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。

使用after伪类，解决高度塌陷

五.导航条练习

导航栏点击效果