高度塌陷
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高，
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱，所以在开发中一定要避免出现高度塌陷的问题,我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的

解决高度塌陷方案一：

当开启元素的BFC以后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC
1.设置元素浮动
使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block
可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式

解决高度塌陷方案二：

可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用，使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构

解决高度塌陷方案三：

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
清除浮动
由于受到box1浮动的影响，box2整体向上移动了100px
我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
可选值：
1.none，默认值，不清除浮动
2.left，清除左侧浮动元素对当前元素的影响
3.right，清除右侧浮动元素对当前元素的影响
4.both，清除两侧浮动元素对当前元素的影响，清除对他影响最大的那个元素的浮动
定位：
定位指的就是将指定的元素摆放到页面的任意位置通过定位可以任意的摆放元素
通过position属性来设置元素的定位
可选值：
1.static：默认值，元素没有开启定位
2.relative：开启元素的相对定位
3.absolute：开启元素的绝对定位
4.fixed：开启元素的固定定位（也是绝对定位的一种）

相对定位

当元素的position属性设置为relative时，则开启了元素的相对定位
1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联
绝对定位
当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位：

1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位，都会同时开启父元素的相对定位），如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质：
（1）内联元素变成块元素，
（2）块元素的宽度和高度默认都被内容撑开

固定定位

当元素的position属性设置fixed时，则开启了元素的固定定位，固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样。
不同的是：
1.固定定位永远都会相对于浏览器窗口进行定位
2.固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动

元素的层级

如果定位元素的层级是一样，则下边的元素会盖住上边的，通过z-index属性可以用来设置元素的层级，可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示，对于没有开启定位的元素不能使用z-index