CSS：浮动特辑

前端 CSS

1. 简介

1) 特点

A 包裹

a. 收缩（水平方向）；
b. 坚挺（高度）；
c. 隔绝（与外部不相关）；
即，块级格式化上下文(Block Formatting Context, BFC)。
具有包裹性的其他属性：

display: inline-block/table-cell/..;
position: absolute(近亲)/fixed/sticky;
overflow: hidden/scroll;

B 破坏

容器被破坏（父元素高度塌陷）；
具有破坏性的其他属性：

display: none;
position: absolute(近亲)/fixed/sticky;

注意：
float的设计初衷是为了实现文字环绕效果。
浮动使父元素高度塌陷，不是bug而是标准！！

2) 特性

1. 元素块状化，使得inline-block→block；
2. 破坏性造成的紧密排列特性（去空格化），即使有 也被跟随到后面而使浮动元素挤在一起；其本质还是为了实现文字环绕效果。

注意：若滥用浮动实现砌砖布局——
1. 容错性比较糟糕，容易出问题；
2. 这种布局需要元素固定尺寸，难以复用；
3. 在低版本的IE下会有很多问题；

2. 清除浮动

1) 方法一：在底部插入clear: both

1. HTML block水平元素放置于底部 <div style="clear: both"></div>
2. CSS after伪元素在底部生成 .clearfix:after{}

2) 方法二：父元素BFC(IE 8+)或haslayout(IE 6/IE 7)

通常声明：

float:left/right
position:absolute/fixed
overflow:hidden/scroll.../*IE 7+/
display:inline-block/table-cell.../*IE 8+*/
width/height/zoom:1/.../*IE 6, IE 7*/

优化后的方法

.clearfix:after{
    content:''; 
    display:block; 
    height:0; 
    overflow:hidden; 
    clear:both;
}/*IE8+*/
.clearfix{*zoom:1;} /*IE 6, IE 7*/

或命名为：

.fix:after{...}
.fix{...}

更精简的方法：

.clearfix:after{
    content:''; 
    display:table; 
    clear:both;
}/*IE8+*/
.clearfix{*zoom:1;} /*IE 6, IE 7*/

注意：.clearfix均不可滥用，.clearfix只应用在包含浮动子元素的父级元素上。

3. 流式布局

1. 文字环绕衍生-单侧固定
   固定部分：width: ; float: ;
   文字部分：padding-left/margin-left:
2. DOM与显示位置匹配的单侧固定布局
   容器：width：100% ;float:;
   文字部分：padding-left/margin-left:
   固定部分：width: ; float: ; margin:负值(=width);
3. 高级-智能自适应尺寸
   一侧:float
   另一侧:display:table-cell(IE8+) / display:inline-block(IE7)

4. 兼容性

1) IE 6之Bug及其解决

1. 双倍margin：当页面内有多个连续浮动时，如设置li的左侧margin值时，在最左侧呈现双倍情况。如外边距设置为10px，而左侧则呈现出20px，解决它的方法是在浮动元素上加上display:inline;的样式，这样就可避免双倍边距bug。
2. 跟随元素3px：当使用浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了。解决方法有几种，对于非常流行的给右侧div增加margin-right: -3px并不推荐，大大增加了布局的复杂度并且如果父div有设置浮动的话就会失效，简单高效的解决办法是在父div里设置overflow:hidden。
3. 当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？
   这种情况可在父窗口加上overflow:auto;zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度，zoom:1;是为了兼容 IE6而使用的CSS HACK。遗憾的是zoom:1;通不过W3C的验证，幸好IE支持<!--[if IE]>这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的<!--[if IE]>中，这样应该可以通过验证了。

4. 超链接访问过后hover样式就不出现：
   被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A

   a:link {color: #1f3a87; text-decoration:none;}
   a:visited {color: #83006f;text-decoration:none;}
   a:hover {color: #bc2931; text-decoration:underline;}
   a:active {color: #bc2931;}
   

5. 图片下方有空隙产生：
   解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img为display:block或者定义vertical-align: vertical-align:top/bottom/middle/text-bottom，
   还可以设置父容器的字体大小为零：font-size:0。

6. 空标签高度问题：
   一个空div如果高度设置为0到19px，IE6下高度默认始终19px。

<div style="background-color:#f00;height:0px;/*给定任何小于20px的高度*/"></div>

如果不让它默认为19px。而是0px的话，解决方法有3种：
a. css里面加上overflow:hidden;；
b. div里面加上注释：<div><!– –></div>；
c. css里面加上line-height:0;然后div里面加上#nbsp;；

2) IE 7之Bug

1. 含clear的浮动元素包裹不正确的问题；
2. 浮动元素倒数2个莫名垂直间距问题；
3. 浮动元素最后一个字符重复问题；
4. 浮动元素楼梯排列问题；
5. 浮动元素和文本不在同一行的问题；