CSS3 总结（七）——浮动

浮动

目的：为了让多个块级元素同一行上显示。
网页布局的核心就是用css来摆放盒子。css的定位机制有三种：普通流（文档流或标准流）、浮动、定位。普通流实际上就是一个网页内标签元素正常从上到下、从左到右排列顺序的意思，比如块级元素占一行，行内元素会按顺序依次前后排列，按照这种大前提的布局排列之下绝对不出现例外情况的叫做普通流布局。

浮动最早是用来控制图片，以便其他元素（特别是文字）实现"环绕"图片的效果。慢慢的就用浮动的特性来布局了。设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程。，他不占位置（可以理解为漂浮在其他标签之上，可能会挡住其他标签，文字内容不会被压住），会影响标准流，浮动只有左右浮动。

属性	描述	格式
float	float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。取值： 1.left ：元素向左浮动。 2.right ：元素向右浮动。 3.none ：默认值。元素不浮动，并会显示在其在文本中出现的位置。

注意：
1.浮动首先创建包含块的概念（包裹），即父元素，就是说，浮动的元素总是找离他最近的父级元素对齐，不会超出内边距的范围。
2.浮动的元素排列位置，会跟上一个元素（块级）有关系。如果上一个元素有浮动，则该元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则该元素的顶部会和上一个元素的底部对齐。
3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
4.元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。
5.浮动根据元素书写的位置来显示相应的浮动。
6.浮动的盒子应该和标准流的父盒子搭配使用。

清除浮动
清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。（子盒子浮动，会脱标，父盒子没有设置高度的话就为0，不会被撑开盒子。注意：当父元素设置了高度，父元素是不会被撑开的，只有没有设置才会被撑开。）

方法	说明	格式
额外标签法	是w3c推荐的做法，通过在浮动元素末尾添加一个空的标签。缺点：容易添加许多无意义的标签，结构化差。	<元素 style=“clear:both”></元素>
父级添加overflow属性方法	可以通过触发BFC的方式，可以实现清除浮动效果。代码简洁，缺点：内容增多时侯容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。	overflow：hidden | auto | scroll
使用after伪元素清除浮动	该方式符合闭合浮动思想，结构语义化正确。缺点：由于IE6-7不支持:after，所以要使用zoom：1触发hasLayout，实现清除浮动，ie6-7能识别特殊符号，带有*的属性，只有ie6-7才执行。	元素：after｛ content：“.”；//内容尽量加，不要空，否则旧版本浏览器有空隙。 display：block； height：0； clear：both； visibiity:hidden； //隐藏盒子 ｝ 元素｛ *zoom:1; ｝
使用before和after双伪元素清除浮动	该方法强烈推荐，代码简洁，缺点是ie6-7不支持：after。	元素:before，元素:after｛ content:""; display:table; ｝ 元素:after｛ clear:both; ｝ 元素｛ *zoom:1; ｝