在网页开发中通常希望容器的高度自适应(不设置高度)，让子元素把容器的高度撑开，当子元素设置浮动后容器的高度撑不开了，就会发生塌陷问题。
消除浮动的方法:
1.给父元素设置overflow:hidden
2.利用空盒子的方法:在浮动元素的同级下设置一个空的元素，利用clear:both来清除
3.万能清除法，最常用可兼容所有浏览器，
定义一个类名，利用伪元素:after并把类名赋值给被浮动元素的父级元素
clear:after{display:block;clear:both;content=" ";visibility:hidden;height:0;}
clear{zoom:1;}(用于兼容IE浏览器)
①父元素没有高度当子元素不设置浮动时
H5中消除浮动的方法
②当设置浮动之后(父元素高度塌陷)
H5中消除浮动的方法
③清除浮动overflow:hidden;
H5中消除浮动的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
div{
width:800px;
border:1px solid black;
margin: 50px auto;
overflow:hidden;/*清除浮动*/
}
.box1{
width:300px;
height: 200px;
background:orange;
/*元素左浮*/
float:left;
}
.box2{
width: 300px;
height:200px;
background:sienna;
/*元素右浮*/
float:right;
}
</style>
</head>
<body>
<div>
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
<cml>
网友评论