浮动定位：
当我们想要让一个大盒子里面的元素并排排列的时候，这个时候就要用到浮动，让元素浮动起来，分别向左向右浮动，达到并排排列的效果。
浮动定位使元素脱离文档流，使用float来设置定位，clear来清除定位.
1. float属性
常用情景：
（1）图文混排，将区域向左向右进行浮动
（2）多列布局，将一个区域分为多个列
属性取值：左浮动-left,右浮动-right，无浮动-none
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
.box{
width:300px;
height:200px;
border: 2px solid #f08080;
margin: 2.5px;
padding: 2.5px;
float: left;
background:#FFEBCD;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
属性特点：
设置浮动后元素脱离文件流，原有的位置丢失
2. clear属性清除浮动
属性：
both：清除元素左右两侧的浮动
left和right：只清除左侧和右侧的浮动
none：默认值，只在需要溢出已指定的清除值时用到
应用情景
（1）单侧清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
.box1{
width:200px;
height:100px;
border: 2px solid #f08080;
margin: 2.5px;
padding: 2.5px;
float: right;
background:#FFEBCD;
}
.box2{
width:200px;
height:100px;
border: 2px solid #f08080;
margin: 2.5px;
padding: 2.5px;
float: right;
clear:right;
background:#FFEBCD;
}
</style>
</head>
<body>
<div class="box1">盒子A</div>
<div class="box2">盒子B</div>
</body>
</html>
（2）处理空位
3. 练习巩固
（1）三行一列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
font-size:30px;
}
#container{
margin: 0 auto;
width: 1000px;
height: 660px;
background-color: #616130;
}
#header{
height:100px;
background-color:#5B5B5B;
margin-bottom: 2.5px;
}
#main{
height: 500px;
background-color:#4F9D9D;
margin-bottom: 2.5px;
}
#footer{
height: 60px;
background-color: #7373B9;
margin-bottom:2.5px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>
least body
</div>
</body>
</html>
(2)一行两列的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
font-size:30px;
}
#container{
margin: 0 auto;
width: 1000px;
height: 500px;
background-color: #616130;
}
#aside{
float: left;
width: 150px;
height: 500px;
background-color: #7373B9;
}
#content{
float: right;
width: 848px;
height: 500px;
background-color: #4F9D9D;
}
</style>
</head>
<body>
<div id="container">
<div id="aside">aside</div>
<div id="content">content</div>
least body
</div>
</body>
</html>
(3) 三行两列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
font-size:30px;
}
#container{
margin: 0 auto;
width: 1000px;
height: 660px;
background-color: #616130;
}
#header{
height:100px;
background-color:#5B5B5B;
margin-bottom: 2.5px;
}
#main{
height: 500px;
margin-bottom: 2.5px;
}
#aside{
float: left;
width: 150px;
height: 500px;
background-color: #7373B9;
}
#content{
float: right;
width: 848px;
height: 500px;
background-color: #4F9D9D;
}
#footer{
height: 60px;
background-color: #7373B9;
margin-bottom:2.5px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="aside">aside</div>
<div id="content">content</div>
</div>
<div id="footer">footer</div>
least body
</div>
</body>
</html>
（4）4行三列的布局
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<link rel="stylesheet" type="text/css" href="CSS/浮动style.css">
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="nav"></div>
<div id="main">
<div id="aside1" class="aside">aside1</div>
<div id="content">content</div>
<div id="aside2" class="aside">aside2</div>
</div>
<div id="footer">footer</div>
least body
</div>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
}
body{
font-size:30px;
}
#container{
margin: 0 auto;
width: 1000px;
height: 1000px;
}
#header{
background-color:#616130;
height:100px;
background-color:#5B5B5B;
margin-bottom: 2.5px;
}
#nav{
height: 50px;
background-color: #4682B4;
margin-bottom: 2.5px;
}
#main{
height: 500px;
margin-bottom: 2.5px;
}
.aside{
width: 100px;
height: 500px;
background-color: #7373B9;
}
#aside1{
float: left;
}
#content{
float:left;
width: 800px;
height: 500px;
background-color: #4F9D9D;
}
#aside2{
float: left;
}
#footer{
height: 60px;
background-color: #6F00D2;
margin-bottom:2.5px;
}
