将一个内联元素变成块元素：
通过display样式可以修改元素的类型
可选值：
inline：可以将一个元素作为内联元素显示
block: 可以将一个元素设置块元素显示
inline-block：将一个元素转换为行内块元素
- 可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
none: 不显示元素，并且元素不会在页面中继续占有位置
文档流：
文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
元素在文档流中的特点：
块元素：
1.块元素在文档流中会独占一行，块元素会自上向下排列
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素：
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距
浮动：
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开 如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用float来使元素浮动，从而脱离文档流
可选值：
none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面的左侧浮动
right，元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
高度塌陷：
根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的
当开启元素的BFC以后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC：
1.设置元素浮动 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
解决高度塌陷方案二：
可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构
解决高度塌陷方案三：
通过after伪类，选中box1的后边
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
这样做和添加一个div的原理一样，可以达到一个相同的效果，
而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
定位：
定位指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
通过position属性来设置元素的定位
可选值：
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
相对定位：
当元素的position属性设置为relative时，则开启了元素的相对定位
1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联
绝对定位：
当position属性值设置为absolute时，则开启了元素的绝对定位
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位，都会同时开启父元素的相对定位）
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质：
内联元素变成块元素，
块元素的宽度和高度默认都被内容撑开
