当元素脱离文档流时，会出现什么问题呢？我们先看看下面这个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8>"
<title></title>
<style type="text/css">
.box1{
border:10px red solid;/*为box1设置一个边框*/
}
.box2{
width: 100px;
height: 100px;
background-color:blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
我们可以看到，在文档流中，父元素的高度默认是被子元素撑开的。但是如果我们给box2设置一个浮动，会出现什么情况呢？
当我们给子元素设置浮动后，子元素完全脱离文档流，此时会导致子元素无法撑起父元素的高度。这也是我们接下来要讨论的问题——高度塌陷。
由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，这样会导致页面布局混乱。如果我们给父元素设置一个和子元素一样的高度，从效果来看似乎避免了高度塌陷问题。但是如果子元素的高度改变了，我们会发现这个问题并没有实质性的解决。父元素并不能自动适应子元素高度，因此不建议使用这种方法。
根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，简称BFC。该属性可以设置打开或者关闭（默认关闭）。当开启元素的BFC后，元素将会具有如下特征：
1、父元素的垂直外边距不会和子元素重叠
2、开启BFC的元素不会被浮动元素所覆盖
3、开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC
1、设置元素浮动
2、设置元素绝对定位
3、设置元素为inline-block
4、将元素的overflow设置为一个非visible的值
前面两种方法虽然可以撑开父元素，但是会导致父元素宽度丢失，并且下边的元素也会上移，不能解决问题。第三种可以解决问题，但是会导致宽度丢失。第四种方法可以达到我们想要的效果，是副作用最小的BFC开启方式。
overflow:auto;/*overflow:hidden;也可以，但是在IE6及以下浏览器中不支持BFC*/
在IE6中有一个类似于BFC的隐含属性hasLayout，可以通过将元素的zoom设置为1开启。
如果我们定义了多个div，若有div使用了浮动，将会对下面的元素产生影响，我们可以使用clear来清除其它浮动元素对当前元素的影响。清除浮动后，元素回到其它元素浮动前的位置。
clear可选值：none，默认值，不清除浮动；left，清除左侧浮动元素对当前元素的影响；right，清除右侧浮动元素对当前元素的影响；both，清除两侧浮动元素对当前元素的影响。
clear只能对兄弟块起作用，那如何解决父子块元素之间产生的高度塌陷问题呢？
<!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: blue;
float:left;
}
.box3{
clear:both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
我们可以在高度塌陷的父元素最后添加一个空白的div，对其进行清除浮动，这样可以通过空白的div来撑开父元素的高度。这种方式虽然可以解决问题，但是会在页面添加多余的结构。我们可以通过after伪类，选中box1的后边来清除浮动，这样就不会在页面添加多余的div。
.clearfix::after{
content:"";/*添加一个内容*/
display:block;/*转换为一个块元素*/
clear:both;/*清除两侧浮动*/
}
网友评论