一:浮动
浮动有两种方式:1]display:inline{这个知道就行}
2]就是 float {这就是css中最常用的浮动方式}
二:CSS浮动
1】float是CSS样式中的定位属性,用于设置标签的居左和居右浮动,
2】浮动值:left{向左浮动}
right:{向右浮动}
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 60%;
height: 300px;
background-color: red;
}
.test1{
background-color: orange;
width: 200px;
height: 200px;
/*display: inline;*/
/*浮动*/
float: left;
}
.test2{
background-color: green;
/*display: inline;*/
float: right;
}
</style>
</head>
<body>
<div id="box">
<div class="test1">第一段</div>
<div class="test2">第二段</div>
</body>
</html>
概括:
1】在副本中所建两个浮动样式,橙色div{左浮动}和绿色div{右浮动}设置成浮动,排列在一行中,都使用float浮动
2】两个浮动样式都在box内进行完成。