当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。
◆清除浮动不是不用浮动，清除浮动产生的不利影响。
◆清除浮动的方法
工作里用的最多的是clear:both;
★1.额外标签法（方法一）
在最后一个浮动元素后添加标签,。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.header,.main,.footer{
width:500px;
}
.header,.footer{
height: 100px;
background: #000;
}
.content{
width: 300px;
height: 300px;
background: orange;
float: left;
/*margin-top:-100px;*/
}
.sidebar{
width: 190px;
height: 300px;
background: green;
float: left;
}
.main{
background: #eee;
margin: 10px 0;
/*overflow: hidden;*/
/*2.给父集元素使用overflow:hidden（方法二）*/
}
.clearfix:after{//3.伪元素清除浮动 推荐使用（方法三）
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear:both;
}
/*兼容ie浏览器*/
.clearfix{
zoom:1;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main >
<div class="content"></div>
<div class="sidebar"></div>
<!-- 额外标签法 -->
<div style="clear:both;"></div>
</div>
<div class="footer"></div>
</body>
</html>
1426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
