float的特征与清除方法

☆float的特征:

  1、块在一排上显示

  2、内联支持宽高

  3、默认内容撑开宽度

  4、脱离文档流

  5、提升层级半层 

☆清除浮动方法:

  不建议：

  1、加高度 (扩展性不好)

  2、给父级加浮动 (页面中所有元素都加浮动，margin左右自动失效（floats bad ！）)

  3、.inline-block 清浮动方法 (margin左右auto失效)

  4、空标签清除浮动 (IE6 最小高度 19px；（解决后IE6下还有2px偏差）)

  5、.br清浮动 (不符合工作中：结构、样式、行为，三者分离的要求)

  6、overflow:hidden (需要配合宽度或者zoom兼容IE6、7)[溢出隐藏(裁刀！)]

  建议：

  after伪类清除浮动(现在主流方法)

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

  .clear{zoom:1;}

    注 after伪类:元素内部末尾添加内容

        :after{content:"由after伪类生成的文字(不写)";}IE6,7下不兼容

       zoom 缩放

         触发IE haslayout，使元素根据自身内容计算宽高。

         FF不支持。

（只要触发BFC或haslayout，那么这片区域就是独立的渲染区域，不受外界影响）

☆触发BFC(快级元素格式化上下文block formatting context)标准浏览器(除IE6、7、8)

  1、float的值不为visible;

  2、overflow的值不为visible;

  3、display的值为table-cell,table-caption,inline-block中的任意一个;

  4、position的值不为relative和static;

  5、width|height|min-width|min-height:(!aotu)

☆触发haslayout  IE浏览器

  1、writing-mode:tb-rl

  2、-ms-writing-mode:tb-rl

  3、zoom:(!normal)

<mark>妙味课堂</mark>