[关闭]
@EncyKe 2015-11-05T06:58:26.000000Z 字数 2715 阅读 2072

CSS:浮动特辑

前端 CSS


1. 简介

1) 特点

A 包裹

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

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

B 破坏

容器被破坏(父元素高度塌陷);
具有破坏性的其他属性:

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

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

2) 特性

  1. 元素块状化,使得inline-blockblock
  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)

通常声明:

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

优化后的方法

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

或命名为:

  1. .fix:after{...}
  2. .fix{...}

更精简的方法:

  1. .clearfix:after{
  2. content:'';
  3. display:table;
  4. clear:both;
  5. }/*IE8+*/
  6. .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样式就不出现:
    被点击访问过的超链接样式不在具有hoveractive了,很多人应该都遇到过这个问题,解决方法是改变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的排版,或者定义imgdisplay:block或者定义vertical-align: vertical-align:top/bottom/middle/text-bottom
    还可以设置父容器的字体大小为零:font-size:0

  6. 空标签高度问题:
    一个空div如果高度设置为0到19px,IE6下高度默认始终19px。
  1. <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. 浮动元素和文本不在同一行的问题;
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注