文档流
文档流处在网页的最底层，它表示的是一个页面中的位置，
我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，
如果一行中不足以容纳所有的内联元素，则换到下一行，
继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
注意:当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，
而是会自动修改宽度，以适应内边距
浮动
浮动：可以设置元素，脱离正常的文档流，向左或者向右，靠近父元素的边缘或者是设置了浮动的其他的元素的边缘靠拢
1.浮动可以解决文字包围图片的问题。
2.浮动可以解决莫名奇妙的间隔问题。
3.浮动可以向左，向右进行排版对齐。
例如
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，
如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用float来使元素浮动，从而脱离文档流
可选值：
none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面的左侧浮动
right，元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动以后（float属性是一个非none的值），
元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
元素浮动以后，会尽量向页面的左上或这是右上漂浮，
直到遇到父元素的边框或者其他的浮动元素
如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
float: left;
内联元素脱离文档流以后会变成块元素
解决高度塌陷
这里先给出解决方案
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
* 这样做和添加一个div的原理一样，可以达到一个相同的效果，
* 而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1; /*在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理*/
}
在文档流中，父元素的高度默认是被子元素撑开的，
也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context
简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当开启元素的BFC以后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC
1.设置元素浮动
- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block
- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
overflow: hidden;
但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，
该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
开启方式很多，我们直接使用一种副作用最小的：
直接将元素的zoom设置为1即可
zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
zoom这个样式，只在IE中支持，其他浏览器都不支持
zoom:1;
overflow: hidden;
* clear可以用来清除其他浮动元素对当前元素的影响
* 可选值：
* none，默认值，不清除浮动
* left，清除左侧浮动元素对当前元素的影响
* right，清除右侧浮动元素对当前元素的影响
* both，清除两侧浮动元素对当前元素的影响
可以直接在高度塌陷的父元素的最后，添加一个空白的div，
* 由于这个div并没有浮动，所以他是可以撑开父元素的高度的，
* 然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，
* 基本没有副作用
* 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构
网友评论