css学习笔记之float

学习来源：

http://www.cnblogs.com/xiaohuochai/p/5248981.html

http://www.cnblogs.com/lhb25/p/story-of-clear-float.html           

这两篇文章写的都很好  强烈推荐拜读  我这里只是整理了适合自己记忆的笔记哦~

概念：

浮动元素脱离普通流，然后按照指定方向，向左或者向右移动，碰到父级边界或者另外一个浮动元素停止。

特性：

支持inline-block的全部特性，并且IE6/7支持，其实就是个带有方位的display:inline-block属性：

【1】未设置宽度时，内容撑开宽度。

【2】行内支持宽高。

【3】非独占一行，块在一行显示（浮动元素自身会生成一个块级框，不论这个元素本身是什么，使浮动元素周围的外边距不会合并）。

【4】包裹性：浮动元素的包含块是指其最近的块级祖先元素。

【5】破坏性：浮动破坏了正常的行框，

重叠：

浮动元素与正常流元素重叠

【1】行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示

【2】块框与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示

浮动排列方式：

某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；

如果A元素上一个元素是普通流中的元素，那么A的相对垂直位置（还是竖向排列）不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

haslayout：

IE6-7使用布局的概念来控制元素的尺寸和定位，那些拥有布局（have layout）的元素负责本身及其子元素的尺寸设置和定位。如果一个元素的 hasLayout 为false，那么它的尺寸和位置由最近拥有布局的祖先元素控制。

BFC：

创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流，所以可以清楚浮动带来的影响。

清除浮动带来的影响：

一.通过添加额外元素设置clear属性

注意：clear属性只能影响使用清除的元素本身，不能影响其他元素。

1）添加额外标签  浮动元素末尾添加一个空的标签例如 ：

<div>

<div >此为浮动元素</div>

<div style=”clear:both”></div>

</div>

因为父级元素需要包含末尾添加的元素（不为浮动流，是普通流） 则父级高度就不会为零  不会塌陷。

但是会添加很多无意义的空标签，有违结构与表现的分离。

2）使用 :after 伪元素，由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

.clear:after{content:""; display: block; clear: both;}
.clear{ *zoom: 1;}

消除原因类似于1），都是在末尾加了个元素，display:block  因为clear属性只应用于块级元素且希望生成的元素占满一行。

二.触发BFC（块级格式化上下文），不支持BFC的，则触发haslayout

触发包含块的BFC十七包含浮动元素，对于IE6/7则触发包含块的haslayout，则浮动元素被layout元素自动包含。

1）父元素设置 overflow：hidden,在IE6中还需要触发 hasLayout ，例如 zoom:1;

<div style="overflow:hidden; *zoom=1;">

<div >此为浮动元素</div>

</div>

触发BFC的其他属性：

1. float的值不为none。

2. overflow的值不为visible。
3. display的值为table-cell, table-caption, inline-block中的任何一个。
4. position的值不为relative和static。

触发haslayout的属性， float：left   |  position：absolute   |  display：inline-block  |  zoom:1  | height/width  不包括overflow。