CSS网页布局中float/clear/position的一点理解
关于float：
float定义元素浮动显示，float:none|left|right；
当属性不等于none引起对象浮动时，对象将被视作块对象，相当于声明了display:block;
即display的默认形式为block;
<!DOCTYPE HTML>
<head>
<meta charset ='utf-8'>
<title> </title>
</head>
<html>
<style>
.box1,.box2,.box3{
width:200px;
height:100px;
border:1px solid red;
line-height:100px;
text-align:center;
float:left;
}
</style>
<body>
<div class="box1">
盒子1
</div>
<div class="box2">
盒子2
</div>
<div class="box3">
盒子3
</div>
</body>
</html>
运行效果：
浮动元素能够实现同行并列显示：
添加float:left;后运行效果：
浮动元素具有自动收缩功能：
如果取消定义浮动元素的大小，它会自动收缩到仅能包含对象的大小；
关于clear:
clear：none|left|right|both
none:允许两边都可以有浮动对象
left:不允许左边有浮动对象
right:不允许右边有浮动对象
both:不允许有浮动对象
添加
.box2{
clear:left;
}
运行效果：
如果添加：
.box2{
clear:right;
}
运行效果不变
因为在解析第二个盒子的时候，第三个盒子还没有出现 所有不会影响第三个盒子的浮动显示
关于position:
position: static|relative|absolute|fixed
static:默认值
relative:遵循正常文档流
absolute:脱离正常文档流，绝对定位
fixed:
<!DOCTYPE HTML>
<head>
<meta charset ='utf-8'>
<title> </title>
</head>
<html>
<style>
.box1,.box2,.box3{
width:200px;
height:100px;
border:1px solid red;
line-height:100px;
text-align:center;
position:absolute;
}
.box1{
left:50px;
top:50px;
}
.box2{
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
.box3{
right:50px;
bottom:50px;
</style>
<body>
<div class="box1">
盒子1
</div>
<div class="box2">
盒子2
</div>
<div class="box3">
盒子3
</div>
</body>
</html>
添加了position:absolute;
运行效果：
如果没有position:absolute;
将默认块状显示的默认规则
relative实例
<!DOCTYPE HTML>
<head>
<meta charset ='utf-8'>
<title> </title>
</head>
<html>
<style>
.box1,.box2,.box3{
width:200px;
height:100px;
border:1px solid red;
line-height:100px;
text-align:center;
position:absolute;
}
.box1{
left:50px;
top:50px;
}
.box2{
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
.box3{
right:50px;
bottom:50px;
}
.wrap{
width:400px;
height:400px;
border: 2px solid blue;
position:relative;
margin:200px;
}
</style>
<body>
<div class="box1">
盒子1
</div>
<div class="wrap">
<div class="box2">
盒子2
</div>
<div class="box3">
盒子3
</div>
</div>
</body>
</html>
运行效果：
盒子2和3将以wrap的定义包含框为参考