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中如果上面的是内联元素    也是浮不上去的 

终极版：

//经过修改后的clearfix是一个多功能的
//既可以解决高度塌陷，又可以确保父元素
和子元素的垂直外边距重叠

.clearfix:before,
.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有