CSS中的定位机制
- 标准流
- 定位
- 浮动
float浮动的原因
float浮动的原因就是使浮动的元素脱离标准流,浮动的元素不占有原空间。
float浮动的副作用
理想效果:
float浮动的子元素会脱离标准流,父元素中就会没有东西撑开,会引起父元素塌陷或者其他元素异位。
<head>
<title>清除浮动的测试</title>
<meta charset="utf-8">
<style>
*{margin:0;padding: 0;}
.box{
width: 300px;
height: auto;
background-color: #000;
}
.subbox1{
width: 200px;
height: 50px;
float: left;
background-color: red;
}
.subbox2{
width: 100px;
height: 20px;
float: right;
background-color: yellow;
}
.subbox3{
width: 100px;
height: 60px;
float: right;
background-color: blue;
}
.footer{
width: 100%;
height: 60px;
background-color: #CCC;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="subbox1"></div>
<div class="subbox2"></div>
<div class="subbox3"></div>
</div>
<div class="footer">footer</div>
</body>
现实效果:
解决float浮动的副作用
有4种方法
- 给父元素添加高度
- 使用clear清除内部和外部浮动
- 给父元素添加overflow属性并结合zoom:1使用
- 给父元素添加浮动
1.给父元素添加高度
.box{
width: 300px;
height: 80px;
background-color: #000;
}
2.使用clear清除内部和外部浮动
(1)在塌陷的父元素中添加CSS带有clear属性的div(或其他元素)
...
.clear{
clear: both; //清除左右浮动
}
</style>
</head>
<body>
<div class="box">
<div class="subbox1"></div>
<div class="subbox2"></div>
<div class="subbox3"></div>
<div class="clear"></div>
</div>
<div class="footer">footer</div>
</body>
(2)给塌陷的父元素添加clear等相关css属性
..
.clearfix:after{ //必须是伪类
clear: both;
content: ' ';
height: 0;
line-height: 0;
display: block;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="subbox1"></div>
<div class="subbox2"></div>
<div class="subbox3"></div>
</div>
<div class="footer">footer</div>
</body>
以上的两种方法都可以实现:
3.给父元素添加overflow属性并结合zoom:1使用
字面意思
4.给父元素添加浮动
字面意思