浮动带来的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #f00;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: #00f;
float: left;
}
.pox{
width: 400px;
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="pox">
</div>
</body>
</html>
清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #f00;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: #00f;
float: left;
}
.pox{
width: 400px;
height: 100px;
background-color: #0f0;
}
.box{
}
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin:0;}
.clearfix:after{content:'\20';display:block;height:0;line-height:0;visibility:hidden;clear:both}
.f12{font-size:12px}
.f16{font-size:16px}
.f22{font-size:22px}
.tc{text-align:center}
.tr{text-align:right}
</style>
</head>
<body>
<div class="box clearfix">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="pox">
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 800px;
height: 400px;
margin: 100px auto;
background-color: #f00;
}
.box2{
width: 800px;
height: 400px;
margin: 100px auto;
background-color: #f0f;
}
.box3{
width: 800px;
height: 400px;
margin: 100px auto;
background-color: #ff0;
}
.box4{
width: 200px;
height: 200px;
background-color: #0ff;
position: fixed;
top: 300px;
left: 300px;
z-index: 2;
}
.box5{
width: 200px;
height: 200px;
background-color: #00f;
position: fixed;
top: 400px;
left: 400px;
z-index: -3;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
margin: 100px auto 0px;
background-color: #f00;
}
.box2{
width: 200px;
height: 200px;
margin: 0px auto;
background-color: #f0f;
position: relative;
top: 0px;
left: 200px;
}
.box3{
width: 200px;
height: 200px;
margin: 0px auto;
background-color: #ff0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 600px;
height: 600px;
margin: 100px auto 0px;
background-color: #f00;
position: relative;
}
.box2{
width: 400px;
height: 400px;
margin: 0px auto;
background-color: #f0f;
}
.box3{
width: 200px;
height: 200px;
margin: 0px auto;
background-color: #ff0;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</body>
</html>
利用定位实现盒子快速居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #f00;
position: absolute;
top: 50%;
left: 0px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>