在文档流中父元素默认被子元素撑开。
但是为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素,导致父元素的高度塌陷。
由于父元素塌陷,父元素下的所有元素会上,导致布局混乱。
所以避免出现高度塌陷问题。
可以将父元素的高度而写死。但是父元素的高度不能适应子元素的高度。
解决高度塌陷问题(一)
根据w3c标准,元素在页面中都有一个影藏的额属性,Block Formatting Context (BFC)
该属性可以打开或者关闭,默认关闭。
当开启之后会有如下的特性:
- 父元素的外边距不会和子元素重叠。
- 开启BFC的元素不会被浮动元素所覆盖。
- 开启BFC的父元素可以包含浮动的子元素。
如何开启BFC:
- 设置元素浮动。(使用这种方开启,会导致父元素宽度丢失。而且也会导致下面的元素上移)
- 设置元素绝对定位。(同上)
- 设置元素为inline-block(可解决问题,但是导致宽度丢失)
- 将元素的overflow设置为一个非visible的值。设置为auto或者hidden(推荐)---ie6不支持。ie6没有BFC,但是有另外一个隐含的属性hasLayout,可以开启hasLayout解决问题。直接将zoom设置为1即可。zoom表示放大写几就放大几倍(只在ie中支持)。
.box1{
border: 10px red solid;
/*float: left;*/
/*display: inline-block;*/
overflow: auto;
zoom: 1;
}
.box2{
width: 100px;
height: 100px;
background-color: salmon;
float: left;
}
.box3 {
border: 10px yellow solid;
}
我们有时希望清除float对其他元素的影响----->clear
可选值:
none:不清除浮动
left:清除左侧浮动元素对当前元素的影响
right:清除右侧浮动元素对当前元素的影响
both:清除两侧浮动元素对当前元素的影响(清除影响最大的那个)
解决高度塌陷方案二,
直接在高度塌陷的父元素的最后,添加一个空白的div。由于div并没有浮动,他是可以撑开父元素的高度的,再对其进行撑开浮动,这样可以通过这个空白的div来撑开父元素的高度(没有副作用)
使用这种方式,但是会添加多余的结构。
通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动。这样做和添加一个div一样,可以达到相同的效果,而且不会在页面中添加多于的div,这是最好的方式。、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.clear{
/*clear: both;*/
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>