<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style type="text/css">
.box1{
width: 100px;
height: 500px;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: rgb(177,210,222);
float: right;
}
.box3{
width: 300px;
height: 300px;
background-color: rgb(147,146,145);
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
清除浮动
- clear属性可以用于清除元素周围的浮动对元素的影响。
- 也就是元素不会因为上方出现了浮动元素而改变位置。
- 可选值：
left：忽略左侧浮动
right：忽略右侧浮动
both：忽略全部浮动
none：不忽略浮动，默认值
<!DOCTYPE html>
<html>
<head>
<title>相对定位</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*margin-left: 200px;*/
/*margin-top: 200px;*/
position: static;
left: 100px;
}
.box3{
width: 200px;
height: 200px;
background-color: rgb(122,133,144);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
相对定位
- 每个元素在页面的文档流中都有一个自然位置。相 对于这个位置对元素进行移动就称为相对定位。周 围的元素完全不受此影响。
- 当将position属性设置为relative时，则开启了元素 的相对定位。
- 当开启了相对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。
<!DOCTYPE html>
<html>
<head>
<title>高度塌陷</title>
<style type="text/css">
/*BFC
1,父元素的垂直外边距不会和子元素重叠
2,开启BFC的元素不会被浮动元素所覆盖
3，开启BFC的元素可以包含浮动的子元素
如何开启
1、设置元素浮动
2、设置元素绝对定位
3、设置元素为inline-block
4、将overflow设置为一个非visible的值
overflow:hidden;
IE6及以下不支持BFC，有hasLayout*/
.box1{
border: 10px red solid;
/*height: 100px;*/
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: rgb(177,188,199);
/*float: left;*/
}
.box3{
height: 100px;
background-color: rgb(100,190,188);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
高度塌陷
<!DOCTYPE html>
<html>
<head>
<title>解决高度塌陷</title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.clearfix:after{
content: "";
display: block;
}
.clearfix{
zoom: 1;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>
解决高度塌陷
