<style>
.boxBg{
margin: 0 auto;
position:relative;
width:500px;
border:2px solid #ccc;
background-color:#ccd;
}
.box1{
float:left;
width:100px;
height:50px;
background-color:red;
}
.box2{
float:left;
width:100px;
height:50px;
background-color:blue;
}
.box3{
float:left;
width:100px;
height:50px;
background-color:green;
}
</style>
执行功效：
很常见的问题，正常环境下。应该灰色的配景会跟框一样高，可事实老是不会尽如人意 :)
这种环境发生的原因，都知道是因为浮动造成的，是的，是浮动，许多处所有说浮动元素会离开普通流，所以普通元素可以当浮动元素不存在，所以这里就不会撑开配景了，可是当真看的同学，必然会记得上边有提到浮动元素不会影响块框，可是会影响行框，也就是文字或内联元素，不管是块级元素照旧内联元素都属于普通流，假如浮动元素离开普通流又为何会影响行框？其实我以为不须要纠结于这些观念性的对象。凭据我的领略浮动元素就是跟块级元素不在一个程度空间，跟文字内联元素在一个空间，所以这里边框就相当于在配景之上，所以不会影响配景元素，泛泛所说的排除浮动，并不是说把浮动元素的float属性去掉，而是排除其周围的浮动元素，使其自身周围没有浮动元素，所以假如想让框三到第二行，不能在框2里边用clear:right;而是需要在框3里边利用clear:left;
复制代码 代码如下:
.box3{
float:left;
width:100px;
height:50px;
background-color:green;
clear:left
}
执行功效：
ok!领略了这个，下来再说说如何使配景和框等高，第一种：最直接的步伐就是直接配置配景高度和框相等就Ok了，虽然这个不是重点，下面来说说排除浮动。首先先看看例子：
复制代码 代码如下:
<!DOCtype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.boxBg{
margin: 0 auto;
position:relative;
width:500px;
border:2px solid #ccc;
background-color:#ccd;
}
.box1{
float:left;
width:100px;
height:50px;
background-color:red;
}
.box2{
float:left;
width:100px;
height:50px;
background-color:blue;
}
.box3{
float:left;
width:100px;
height:50px;
background-color:green;
}
.clear{
width:100px;
height:50px;
}
</style>
</head>
<body>
<div>
<div>
框框1
</div>
<div>
框框2
</div>
<div>
框框3
</div>
<div></div>
</div>
</body>
</html>
执行功效：
