携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

文档流

文档流是由 CSS 定位语句定义的页面元素的排列，文档流包括三种排列方式:

• 普通流:也叫标准流，是最常见的文档流，是网页内正常的排列方式，即从上到下，从左到右的排列
• 浮动(Float):浮动框不在文档的普通流中,内容可能沿其一侧流动,可以向左或向右移动,直到浮动元素的外边缘碰到父级元素内边框或另一个浮动元素的边框为止
• 定位:定位是一种浏览器默认的定位方式可以通过display属性调整自己相对于父元素或者整个页面的定位位置

浮动的属性:

浮动属性可分为三种：默认不浮动（float:none）,左浮动（float：left）,右浮动（float：right）

特性:

浮动的最大特性就是脱离标准流，使得浮动元素

1. 不再保留原来的位置，而且不占位置，会漂浮在标准流的上面
2. 由于浮动只有接触到父元素或者其他浮动元素的边缘才停下，所以浮动元素和浮动元素之间没有间隙
3. 浮动元素只存在水平方向上，只能左浮动或者右浮动，不能上下对齐
4. 浮动元素和浮动元素之间会水平顶部对齐，且在一行显示
5. 浮动的元素特性像行内块元素，但是区别是行内块元素中间会有缝隙，而浮动元素没有，块级元素未设置宽度情况下，宽度继承父元素而浮动元素的宽度在未设置的情况下由内容来决定

应用:

1. 文字环绕效果，由于浮动脱离了标准流，在浮动元素和一段文字在一起时会形成文字环绕
2. 由于浮动元素水平排列且顶部对齐，可以用于排列效果

清除浮动:

虽然浮动有许多好处，但是浮动造成的弊端也是有的，为此，需要清除浮动，主要有以下几种方法：

1. 父级盒子元素触发BFC(块级格式化上下文),overflow:hidden，overflow:auto
2. 父级盒子元素设置固定的高度
3. 浮动元素设置clear:both
4. 父级盒子元素设置伪对象:after 和 zoom

.clearfix:after {
   content: "";
	clear: both;
}
.clearfix {
    zoom: 1;  /*ie浏览器6,7版本清除浮动的方式*/
}

5. 父级盒子元素使用双伪元素法：

.clearfix:before ,.clearfix:after { content: ""; display: table; }
.clearfix:after { clear:both; } .clearfix { zoom: 1; }