第12章 浮动布局与定位布局
浮动布局
文档流简介
文档流：就是指元素在页面中出现的先后顺序；
正常文档流：将一个页面从上到下分为一行一行的，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满；
脱离文档流：指脱离正常文档流。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div></div>
<span></span><span></span>
<p></p>
<span></span><i></i>
<img />
<hr />
</body>
</html>
正常文档流：由于div、p、hr都是块元素，因此独占一行。而span、i、img都是行内元素，因此如果两个行内元素相邻，就会位于同一行，并且从左到右排列。
浮动
float:left|right;
left|right元素向左|向右浮动
浮动，可以使得元素移到左边或者右边，并且允许后面的文字或环绕着它。常用于实现水平方向上的并排布局，例如两列布局、多列布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father
{
300px;
background-color: #0C6A9D;
border:1px solid silver;
}
#father div
{
padding:10px;
margin:15px;
}
#son1
{
background-color: hotpink;
float: left;
}
#son2
{
background-color: #FCD568;
/* float: right; */
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
</div>
</body>
</html>
清除浮动
clear:left|rigth|both;
left|rigth|both:清除左浮动|清除右浮动|同时清除左浮动和右浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father
{
300px;
background-color: #0C6A9D;
border:1px solid silver;
}
#father div
{
padding:10px;
margin:15px;
}
#son1
{
background-color: hotpink;
float: left; /*左浮动*/
}
#son2
{
background-color: #FCD568;
float: right; /*右浮动*/
}
.clear{clear:both;}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div class="clear"></div>
</div>
</body>
</html>
定位布局
定位布局简介
四种方式：固定定位fixed、相对定位relative、绝对定位absolute、静态定位static
固定定位
position:fixed;
top:px;
bottom:px;
left:px;
right:px;
相对定位
position:relative;
top:px;
bottom:px;
left:px;
right:px;
默认情况下，固定定位元素的位置是相对浏览器而言，而相对定位元素的位置是相对于原始位置而言！
绝对定位
position:absolute;
top:px;
bottom:px;
left:px;
right:px;
静态定位
position:static;
top:px;
bottom:px;
left:px;
right:px;