<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ border:1px red solid; } .box2{ height:100px; width:100px; background-color:red;} .box3{ height:100px; width:100px; background-color:yellow;} </style> </head> <body> <div class="box1"><div class="box2"></div></div> <div class="box3"></div> </body> </html>
首先生成三个div 第一个div设置边框并且包含第二个div 第三个div设置宽和高
运行并未出现高度塌陷问题，当我们让第二个div的box2里面添加 float: left; 浮动的时候就会出现
浮动时我们写滑动图片，要用的必要元素，为解决以上问题，有一下两种解法方法
第一种方法用
zoom:1;
overflow: hidden;
开启div的BFC
* 当开启元素的BFC以后，元素将会具有如下的特性：
* 1.父元素的垂直外边距不会和子元素重叠
* 2.开启BFC的元素不会被浮动元素所覆盖
* 3.开启BFC的元素可以包含浮动的子元素
第二种方法
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
* 这样做和添加一个div的原理一样，可以达到一个相同的效果，
* 而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
在父级div种添加
.clearfix:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
/*
* 在IE6中不支持after伪类,
* 所以在IE6中还需要使用hasLayout来处理
*/
.clearfix{
zoom:1;
}