解决由float引起的“高度塌陷”问题
2016-09-07 20:05
399 查看
“高度塌陷”是指父元素未设置高度和宽度,而且其只包含浮动的子元素时,该父元素的高度会产生“塌陷”.换言之,当元素不具有实际高度时,就会产生“高度塌陷”。
解决“高度塌陷”问题的方法有如下几个:
1.在父元素结束前加一个高度为0,宽度为0,且clear:both的div。当然如果有未浮动的子元素,可以直接clear:both。
说明:如果实际项目中父元素含有未浮动的子元素时,可以给未浮动的子元素加clear:both,就不需要在设置一个高度和宽度为0的div
2.为父元素添加overflow:hidden属性,兼容ie6时需要再添加zoom:1
.father{
overflow:hidden;
zoom:1;/*兼容IE6*/
}
.left{float:left;}
3.使用after伪对象清除浮动,但这个只适用于非IE浏览器。
解决“高度塌陷”问题的方法有如下几个:
1.在父元素结束前加一个高度为0,宽度为0,且clear:both的div。当然如果有未浮动的子元素,可以直接clear:both。
<div> <div class="left">块1</div> <div class="left">块2</div> <div class="left">块3</div> <div class="clear"></div> </div>
.left{float:left;/*举例,其他样式在此不设置*/} .clear{clear:both;height:0;width:0;}
说明:如果实际项目中父元素含有未浮动的子元素时,可以给未浮动的子元素加clear:both,就不需要在设置一个高度和宽度为0的div
2.为父元素添加overflow:hidden属性,兼容ie6时需要再添加zoom:1
<div class="father"> <div class="left">块1</div> <div class="left">块2</div> <div class="left">块3</div> </div>
.father{
overflow:hidden;
zoom:1;/*兼容IE6*/
}
.left{float:left;}
3.使用after伪对象清除浮动,但这个只适用于非IE浏览器。
<div class="father"> <div class="left">块1</div> <div class="left">块2</div> </div>
.father{zoom:1;/*兼容IE6*/} .father:after{display:block;clear:both;content:"";visibility:hidden;height:0;} .left{float:left;}
相关文章推荐
- HTML5基础加强css样式篇(float补充,清除浮动解决高度塌陷问题,定位补充)(一)
- overflow解决float浮动后高度自适应问题
- 解决float引起父容器高度失效的办法
- CSS: 解决Div float后,父Div无法高度自适应的问题
- CSS: 解决Div float后,父Div无法高度自适应的问题
- css样式float造成的浮动“塌陷”问题的解决办法
- overflow解决float浮动后高度自适应问题
- [转]overflow解决float浮动后高度自适应问题
- 关于高度塌陷问题解决方法
- 解决子级用css float浮动,而父级div不能自适应高度问题
- overflow解决float浮动后高度自适应问题
- overflow解决float浮动后高度自适应问题 即换行
- 解决float浮动带来的父元素高度没有的问题---清除浮动
- DIV+CSS处理DIV设置float后,父容器无法定位高度的问题解决
- overflow解决float浮动后高度自适应问题
- 解决高度塌陷的问题 – 清除浮动
- 解决子块Float浮动后,父块高度自适应问题
- css样式float造成的浮动“塌陷”问题的解决办法
- <转载>如何解决子级用float浮动父级div高度不能自适应的问题