1.float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title> <style>
body{
border-style:solid;
border-size:3px;
}
.div1{
width:100px;
height:100px;
background-color:red;
float:left;
}
.div2{
width:100px;
height:100px;
background-color:green;
float:left;
}
.div3{
width:200px;
height:200px;
background-color:gray;
}
</style>
</head>
<body>
<!
目的：如何在一行显示多个div元素
--正常文档流：将元素（标签）在进行排版布局的时候按着 从上到下 从左到右的顺序排版的一个布局流
脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局
float：浮动,最好用float，如果有文本，会被挤出去。对于文本来说是不完全文档流
position:absolute fixed定位（完全脱离）
-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear</title> <style>
.div1{
width:100px;
height:100px;
background-color:red;
float:left;
}
.div2{
width:100px;
height:100px;
background-color:green;
float:left;
}
.div3{
width:200px;
height:200px;
background-color:gray;
clear:both;
}
</style>
</head>
<body>
<!--clear就是清除float元素，可以设置左右两边不能有浮动元素-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
2.position
fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title> <style>
.div1{
height:1500px;
background-color:green;
}
.div2{
height:1500px;
background-color:yellow;
}
a{
position:fixed;
bottom:20px;
right:20px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<!--position:absolute fixed 定位（完全）-->
<a >返回顶部</a>
</body>
</html>