html高度塌陷问题解决

高度塌陷的问题：

   当开启元素的BFC以后，元素将会有如下的特性

   1 父元素的垂直外边距不会和子元素重叠
   开启BFC的元素不会被浮动元素所覆盖
   开启BFC的元素可以包含浮动的子元素

   如何开启元素的BFC

   设置元素浮动
   设置元素绝对定位
   设置元素为inline-block

   float:left; (不好) 虽然可以撑开父元素会导致父元素宽度丢失了

   而且使用这种方式导致下边的元素上移。

   display:inlink-block;

   布局好了，但是宽度又没有了。但是会导致宽度丢失，不推荐使用这种方式

   4 将元素的overflow 设置非visible值

   overflow:visible

   overflow:auto; 解决父元素高度塌陷副作用最小的
           hidden;

兼容性

在IE6中没有BFC, 但是具有另一个隐含的属性叫hasLayout.

该属性的作用和BFC类似，所在IE6浏览器通过开启hasLayout来解决问题。

方式：

    元素的zoom设置为1即可

    zoom:1

    在 IE6中如果为一个元素指定了一个宽度，则会默认开启一个

    hasLayout.

clear: both 清楚对他影响最大的那个元素的浮动

解决高度塌陷的方案二

    可以直接在高度塌陷的父元素的最后，添加一个空白的div

    由于这个div并没有浮动，他是可以撑开父元素高度的

    然后对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用

    虽然可以解决问题啊，但是在页面中添加多余的结构。

   **********************************   ==>    通过after伪类设置为块级元素清除两边浮动解决父类塌陷的问题

    通过after伪类，选中box1的后边

    .box1:after{

        content:"";
        display:block;

        //清除两侧的浮动

        clear:both;

    }

    IE6不支持伪类。 zoom:1;

    .clearfix:after{
        /*添加一个内容*/
        content:"";
        /*转换为一个块元素*/
        display:block;
        /*清除两侧的浮动*/
        clear:both;
    }

    /*在IE6中不支持after伪类，
    所以在IE6中还需要使用hasLayout来处理*/

    .clearfix{
        zoom:1;
    }

IE6中如果上面的是内联元素   也是浮不上去的