BFC:(block formatting context) 块级格式上下文,以特殊的规则渲染内部的元素,一片独立的渲染空间.

BFC:

          1.块元素 自上而下排列

          2.块元素的左边距(margin-left) 会贴合容器的内边距,就算出现浮动元素也会如此,除非该块元素也成为BFC

          3.同一个BFC 的 块元素的垂直方向的外边距会叠加

          4.BFC  区域不会和 浮动区域叠加

          5.BFC  内部的浮动元素会参入BFC的高度计算

          6.BFC  内部的元素不会影响外部的元素,外部元素不会影响BFC  区域的元素

产生BFC:

          1.根元素

          2.overflow  不为 visible,

          3.display  为inline-block,

          4.float    不为 none,

          5.position: 为  absolute 或者 fixed

    IFC (inline formating context):内联格式上下文 可以在同一行排列(inline,inline-block,float:left,right), 规定元素在同一行的水平和垂直对齐方式的   

1.同一行排列 元素(inline boxes,没有容器包裹的文本,可以视为是 span ,匿名的inline boxes)在同一行排列 会产生行框(line box),行框内的元素默认按照自左向右的顺序依次排列(浮动元素除外),,行框在垂直方向 有顶部,底部,基线& 中间位置,同一行无法继续排列,会产生下一个行框,同一行的高度默认由最高的元素撑开,可以通过设置行高来改变 行框的高度.

2.水平排列的顺序:(text-align),

IE6 div最小高度19

解：与line-height和font-size 有关，设置为0

IE6中，float：left的第一个margin-left会显示双倍  right同理

解：_dispaly：inline （_下划线表示只被ie6识别）

IE7 以下块元素，不支持给块元素设置display：inline-block

解：*display：line

       *zoom ：1              表示本身的大小缩放一倍，触发重新布局

IE7以下：相对定位的元素如果发生内容溢出父元素设置overflow：hidden； 无法阻止

解：父元素设置position：relative；

IE7以下li间隙  li内部有2个以上的浮动元素存在，li之间会有垂直间隙

解：设置垂直对齐vertical-align

IE6不能识别 png-24

CSS-hack 使用样式：hack来达到页面效果的统一

一：条件注释  内部的标签/样式/js等只能对应的ie浏览器识别

       if gt IE 6 大于 ie 6

        if lt IE 8  小于 ie 8

        gte. 大于等于

        lte  小于等于

<!--[if IE 6]>

        <style>

        div {

            background: pink;           ← 代码样式写在style外面

        }

    </style>

    <![endif]-->

样式属性前添加特定的前缀被特定浏览器识别

             _: ie6

            +:ie6,ie7

            *:ie6,ie7

选择器添加前缀

(* || _ || + )div ,span {

                 ...........

                } 

css hack:可以使用其他的一些方法来解决问题的,不用css hack