CSS - 浮动

1. 浮动（float）

1.1 普通流（normal flow）

也叫 文档流、普通流、标准流。

普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，如块级元素会独占一行，行内元素会按照顺序依次前后排列。

1.2 什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

选择器 {float: 属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

1.3 浮动特性

• 浮动脱离标准流，不占位置 ，会影响标准流。

• 浮动只有左右浮动。

• 浮动首先创建包含块的概念（包裹）。即浮动元素总是找离他最近的父元素对齐，但不会超出内边距的范围。

• 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动，这样才能一行对齐显示。

• 元素添加浮动后，元素会具有行内块元素的特性：

  • 元素的大小完全取决于定义的大小或者默认的内容多少，浮动根据元素书写的位置来显示相应的浮动

• 浮动的元素排列位置，跟上一个元素（块级）有关系:

  • 如果上一个元素有浮动，则下一个元素顶部会和上一个元素的顶部对齐
  • 如果上一个元素是标准流，则下一个元素的顶部会和上一个元素的底部对齐。

2. 版心和布局流程

“版心”（可视区）是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

布局流程

1、确定页面的版心；
2、分析页面中的行模块，以及每个行模块中的列模块；
3、制作HTML结构；
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

3. 清除浮动

由于浮动元素不再占用文档流的位置，所以它会对后面的元素的排版产生影响，为了解决这些问题，就需要在该元素中清除浮动。

准确来说，并不是清除浮动，而是清除浮动后造成的影响。

清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。

清除浮动的方法（闭合浮动）

语法：

选择器 {clear: 属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

3.1 额外标签法

通过在浮动元素末尾添加一个空的标签，如

 <div style="clear:both"></div>，或其他标签</ br>也可

优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差。不推荐。

3.2 父级添加overflow属性方法

可以通过触发BFC的方式实现。

可以给父级添加： overfolw为hidden | auto | scroll 都可以实现

优点：代码简洁。
缺点：内容增多时容易造成不会自动换行导致内容被隐蔽掉，无法显示需要溢出的元素。

3.3 使用after伪元素清除浮动

:after 方式为空元素的升级版，可以不用单独加标签。

使用方法：

.clearfix:after {content: "";
				 display: block;
				 height: 0;
				 clear: both;
				 visibiluty: hidden;
}
.clearfix {
			zoom: 1;
}     /* IE6、7专有 */

优点：符合闭合浮动思想，结构语义化正确。
缺点：由于IE6-7不支持 :after，使用zoom：1触发hasLayout。

注意：content: “.” 里面尽量跟一个小点或者其他，否则在Firefox 7.0前的版本会有空格生成。

3.4 使用before和after双伪元素清除浮动

使用方法：

.clearfix:before, .clearfix:after {
									content: "";
									display:table;  /* 这句话可以触发BFC，BFC可以清除浮动 */
}
.clearfix:after {
				  clear: both;
}
.clearfix {
			*zoom: 1;
}

优点：代码更简洁
缺点：由于IE6-7不支持 :after，使用 zoom: 1触发 hasLayout。