高度塌陷问题
父元素的高度默认被子元素撑开,但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,将会导致父元素的高度塌陷。
根据W3C标准,在页面中,元素都有一个隐含的属性叫做Block Formatting Context
,简称BFC,该属性默认关闭,当开启后,元素将会有如下特性:
- 父元素的垂直外边距将不会和子元素重叠,给子元素设置外边距时,外边距不会传递给父元素
- 开启BFC的元素不会被浮动元素覆盖
- 开启BFC的父元素可以包含浮动的子元素
如何解决高度塌陷?
如何开启BFC?
- 设置浮动
- 设置元素绝对定位
- 设置元素inline-block
- 将元素的overflow设置为一个非visible的值
为父元素设置float可以包含浮动的子元素,但是会导致父元素宽度丢失,而且下面的元素会上移。
设置inline-block可以解决问题,但是也会造成父元素宽度丢失。
因此解决高度塌陷的最佳方式是设置overflow的值:
overflow:hidden;
overflow:auto;
但是这种方法会切除掉不在显示范围内的相对定位的元素。
IE6及以下的版本不支持BFC,所以这种方式不能兼容IE6
在IE6中有另一个隐含属性hasLayout
,该属性和BFC类似,在IE6中可以通过开启hasLayout来解决该问题,开启的方法之一是,将元素的zoom
值设置为1即可。zoom表示放大的意思,数值表示放大倍数。在IE6中,如果设置了宽度,也会开启hasLayout。
zoom:1;
所以如果要兼容所有浏览器,就需要两个都写
overflow:hidden;
zoom:1;
clear
clear
可以清除其他元素对当前元素产生的影响,可选值:
- none:默认值,不清除
- left:清除左侧清除左侧浮动元素对当前产生的影响
- right:清除右侧浮动元素对当前产生的影响
- both:清除两侧元素产生的影响
解决高度塌陷:
方法一:
所以可以在父元素的最后添加一个元素,并且将这个兄弟元素的clear
设置为both,所以当前面的子元素浮动时,这个没有高度的,并且清除了兄弟元素浮动对其产生影响的元素,刚好可以把父元素的高度撑开到原始位置。使用这种方式虽然可以解决问题(W3C推荐方法),但是会在我们页面中添加多余的结构,所以这种方式并不完美。
方法二:
我们可以通过after
伪类,向父元素的最后添加一个空白的块元素,并且对其清除浮动,可以达到和上面相同的效果。但是在IE6中不支持伪类,所以,需要使用hasLayout处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
border:1px red solid;
}
.box2{
width:100px;
height:100px;
background-color:#bfa;
float: left;
}
.clearfix:after{
content:"";
/*将添加的内容设置为块元素*/
display: block;
clear: both;
}
/*兼容IE6*/
.clearfix{
zoom:1;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
这里的content那里的冒号很重要。