高度塌陷问题
父元素的高度默认被子元素撑开，但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，将会导致父元素的高度塌陷。
根据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那里的冒号很重要。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
