css中浮动与定位的详细说明
作者：互联网
浮动
我们直接来看代码和图
一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.father{
width: 600px;
height: 300px;
background: deepskyblue;
}
.child1{
width: 100px;
height: 100px;
background: #831ee0;
}
.child2{
width: 100px;
height: 100px;
background: aqua;
}
</style>
<body>
<div class="father">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.father{
width: 600px;
height: 300px;
background: deepskyblue;
}
.child1{
width: 100px;
height: 100px;
background: #831ee0;
float: left;
}
.child2{
width: 100px;
height: 100px;
background: aqua;
}
</style>
<body>
<div class="father">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
child1左浮，脱离文档流，相当于浮起来了，它底下那块地就空出来了，所以child2就补上去了，但是由于他俩大小一样，完全遮盖住，所以看着的效果就是只有child1了。
三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.father{
width: 600px;
height: 300px;
background: deepskyblue;
}
.child1{
width: 100px;
height: 100px;
background: #831ee0;
float: left;
}
.child2{
width: 100px;
height: 100px;
background: aqua;
float: left;
}
</style>
<body>
<div class="father">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
如果两个都是同一边的浮动，就会变成一行，常用这种方法去把块级元素放在同一行
四
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.father{
width: 600px
background: deepskyblue;
}
.child1{
width: 100px;
height: 100px;
background: #831ee0;
float: left;
}
.child2{
width: 100px;
height: 100px;
background: aqua;
float: left;
}
</style>
<body>
<div class="father">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
你可以发现，父级的高度本来是靠子级往大撑的，结果现在子级都浮动了，两个自己都脱离文档流，父级高度成了0了(不是没有了，是高度为0了)，这就叫高度塌陷，有四种方法消除掉
Ⅰ.在浮动元素的后面加一个空的div标签专门用来消除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.father{
width: 600px;
background: deepskyblue;
}
.child1{
width: 100px;
height: 100px;
background: #831ee0;
float: left;
}
.child2{
width: 100px;
height: 100px;
background: aqua;
float: left;
}
.clear{
clear: both; <!--left，right，both三种-->
}
</style>
<body>
<div class="father">
<div class="child1"></div>
<div class="child2"></div>
<div class="clear"></div>
</div>
</body>
</html>
Ⅱ. ::after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.father{
width: 600px;
background: deepskyblue;
}
.child1{
width: 100px;
height: 100px;
background: #831ee0;
float: left;
}
.child2{
width: 100px;
height: 100px;
background: aqua;
float: left;
}
.father::after{
content: '';
display: block;
clear: both;
}
</style>
<body>
<div class="father">
<div class="child1"></div>
<div class="child2"></div>
<div class="clear"></div>
</div>
</body>
</html>
它相当于在父元素的最后面添加了一个行元素，如果需要内容为空，就写''，一定要写
但是这种有一个缺点，就是有一个父元素需要消除浮动，就得写一遍，所以有了第三种
Ⅲ.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.father{
width: 600px;
background: deepskyblue;
}
.child1{
width: 100px;
height: 100px;
background: #831ee0;
float: left;
}
.child2{
width: 100px;
height: 100px;
background: aqua;
float: left;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
</style>
<body>
<div class="father clearfix">
<div class="child1"></div>
<div class="child2"></div>
<div class="clear"></div>
</div>
</body>
</html>
谁想清除浮动，谁的类属性就加一个clearfix，这样就简单多了
四
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.father{
width: 600px;
background: deepskyblue;
}
.child1{
width: 100px;
height: 100px;
background: #831ee0;
float: left;
}
.child2{
width: 100px;
height: 100px;
background: aqua;
float: left;
}
.father{
overflow: hidden;
}
</style>
<body>
<div class="father clearfix">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
overflow: hidden本意是溢出隐藏，但是用在这里可以消除浮动
定位
相对定位relative
先说一句题外话
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.father{
width: 500px;
height: 300px;
background: deepskyblue;
}
.child1,.child2,.child3 {
width: 100px;
height: 100px;
display: inline;
}
.child1{
background: #831ee0;
}
.child2{
background: blue;
}
.child3{
background: yellowgreen;
}
</style>
<body>
<div class="father">
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
</div>
</body>
</html>
这是因为行级元素是不能设置宽高的，只能由内容去撑大，你设置的width: 100px;height: 100px;是无效的，所以要用display: inline-block;用了以后，两两之间会有一条缝隙，上图也是，只需把div放在一行，它们就紧紧的挨在一起了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.father{
width: 500px;
height: 300px;
background: deepskyblue;
}
.child1,.child2,.child3 {
width: 100px;
height: 100px;
display: inline-block;
}
.child1{
background: #831ee0;
}
.child2{
background: blue;
}
.child3{
background: yellowgreen;
}
</style>
<body>
<div class="father">
<div class="child1">1</div><div class="child2">2</div><div class="child3">3</div>
</div>
</body>
</html>
相对定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.father{
width: 500px;
height: 300px;
background: deepskyblue;
}
.child1,.child2,.child3 {
width: 100px;
height: 100px;
display: inline-block;
}
.child1{
background: #831ee0;
position: relative;
left: 50px;
top: 30px;
}
.child2{
background: blue;
}
.child3{
background: yellowgreen;
}
</style>
<body>
<div class="father">
<div class="child1">1</div><div class="child2">2</div><div class="child3">3</div>
</div>
</body>
</html>
可以看出他是相对于自己原来的位置变了，并且，虽然移动走了，但是它的空间是不释放的，也就是说，它虽然移动走了，但是后面的内容不能补上来
绝对定位absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.father{
width: 500px;
height: 300px;
background: deepskyblue;
}
.child1,.child2,.child3 {
width: 100px;
height: 100px;
display: inline-block;
}
.child1{
background: #831ee0;
}
.child2{
background: blue;
position:absolute;
left: 50px;
top: 30px;
}
.child3{
background: yellowgreen;
}
</style>
<body>
<div class="father">
<div class="child1">1</div><div class="child2">2</div><div class="child3">3</div>
</div>
</body>
</html>
可以看出absolute移走后会释放空间，后面的内容可以补上来，并且，绝对定位的元素的位置是相对于body的。，这里其实说的还不完全对，在后面的总结里会说。
固定定位fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 300px;
width: 300px;
background: deepskyblue;
position: fixed;
left: 500px;
top: 500px;
}
</style>
</head>
<body style="height: 5000px">
<div class="aaa">我是广告</div>
</body>
</html>
不管滚动条怎么移动，它都会在一个地方不动，并且会释放空间。
总结
相对定位relative
1.相对于自己的初始位置
2.定位后空间不释放
绝对定位absolute
1.位置相对于最近的、已定位的祖先元素，如果没有最近的、已定位的祖先元素，就相对于body
2.定位后释放空间
固定定位fixed
1.位置相对于可视页面
2.定位后释放空间
标签：浮动,定位,child2,child1,100px,height,width,background,css 来源： https://www.cnblogs.com/python20020105/p/16101608.html