页面布局高度塌陷问题和解决方案
产生高度塌陷的原因
如果我们未对父元素设置高度,默认被子元素撑开,而一旦子元素脱离标准文档流,子元素不在文档流中占有原来的位置。此时父元素高度塌陷,导致布局混乱。
创建一个div1,再在其中创建一个子div2 ,代码如下。父元素不设置高度。子元素设置左浮动(脱离标准文档流)。
<style type="text/css">
.div1{
background-color: #0000FF;
border: 2px solid red;
}
.div2{
background-color: #008000;
width: 100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
运行效果如图:父div高度塌陷。
解决方案
一、直接给父元素设置高度。父元素塌陷本就因为自身未设定高度。默认被子元素撑开。但这种方式显然不好,父元素高度设限,不能再随子元素高度扩张。
二、在浮动元素后边添加同级块元素。父元素因为子元素脱离文档流而高度塌陷。我们可以通过添加其他块状子元素,给定高度。把父元素高度撑起来。(在div2后添加div3)
<style type="text/css">
.div1{
background-color: #0000FF;
border: 2px solid red;
}
.div2{
background-color: #008000;
width: 100px;
height: 100px;
float: left;
}
.div3{
height: 100px;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
// 添加div3,设置高度和div2一致。用来把父元素div1撑起来
<div class="div3"></div>
</div>
</body>
三、仍然是在浮动的子元素后添加块元素。但是该块元素不设置高度。通过clear 属性来解决。
clear属性可以消除浮动元素对当前元素的浮动影响。 属性值:left, right, both 。分别消除左侧、右侧、俩侧浮动元素的影响。可以理解为:设置clear属性的元素的外上边框,正处于对应浮动元素的下边框,并会在上边框之上增加清除空间。所以div3设置clear:left 或 clear:both 。
<style type="text/css">
.div1{
background-color: #0000FF;
border: 2px solid red;
}
.div2{
background-color: #008000;
width: 100px;
height: 100px;
float: left;
}
.div3{
clear:left;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
//设置clear属性
<div class="div3"></div>
</div>
</body>
但是以上是通过增加多余的元素来实现的(div3只是为了布局,撑高度,没有存在的意义)。我们可以为父元素 设定after 伪类来为父元素实现,代码如下:
.commonClear:after{
content:"";
display: block;
clear: both;
}
<body>
// commonClear可作为公用的,用来解决高度塌陷问题
<div class="div1 commonClear">
<div class="div2"></div>
</div>
</body>
四、每个元素都有隐藏的属性叫BFC(不详细描述),该属性默认是关闭的。我们可以通过开启BFC来解决高度塌陷问题。
开启BFC的元素具有以下特性:
1、父子元素的垂直外边距不会重叠
2、元素不会被浮动元素覆盖。
3、元素可以包含浮动的子元素
开启方式:
1、设置元素浮动,给父元素设置元素浮动,但这种方式会让父元素宽度丢失。父元素不单独跨一行,父元素同级下边的元素,无论是块元素还是行内元素,都会上移。不建议采用
2、设置元素的display属性为inline-block。 也会导致父元素宽度丢失。
3、设置overflow值为hidden(其他非visible值也可以。hidden 副作用最小)。
4、设置元素绝对定位(后续描述)
需要注意的是。IE6没有BFC。但有另一个隐藏属性hasLayOut。在ie6可以通过设定zoom:1来开启hasLayOut。来解决高度塌陷问题。