您现在的位置是:网站首页> 内容页

html高度塌陷问题解决

  • 立博体育
  • 2019-06-30
  • 191人已阅读
简介高度塌陷的问题:   当开启元素的BFC以后,元素将会有如下的特性   1父元素的垂直外边距不会和子元素重叠   开启BFC的元素不会被浮动元素所覆盖   开启BFC的元素可

高度塌陷的问题:    当开启元素的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;}

 

文章评论

Top