浮动
页面布局的主要方式：
文档流：块级元素上下显示，行内块和行内元素左右显示
浮动：脱离正常的文档流，块级元素可以左右显示
定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
1.浮动的定义
元素的浮动是指设定浮动之后会相对于自身之前的位置。其基本语法格式如下：
选择器{float:属性值;}
有关属性值的描述为：
left 元素向左浮动
right 元素向右浮动
none 元素不浮动（默认值）
2.浮动的特性
相当于机械绘图中的图层，底层为html图层，上一层为浮动所在图层，两个图层叠加，但不透明，浮动后底层html会自动重新排列元素
脱离标准流，不占位置，浮动只有左右浮动
目的：为了让多个块级元素可以在一行显示
我的理解：
div是块级元素，在页面中独占一行，自上而下排列。浮动的目的是如何将一行显示多个div元素。元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。
浮动的框可以向左向右滑动，直到碰到边缘边框为止。
以下为课上练习代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#father{width: 600px;
height: 30px;
background: lightblue;
margin:100px;
auto:0}
#son1{
width:500px;
height: 100% ;
background: lightcoral;
/*display: inline-block;*/
float: right;
}
#son2{
width: 100px;
height: 100%;
background: lightgreen;
/*display: inline-block*/;
float: right;
}
</style>
</head>
<body>
浮动的框可以向左或向右移动，直到她的外边缘碰到包含框或另一个浮动框的边框为止。
<div id="father">
<div id="son1">
<div id="son2"></div>
</div>
</div>
</body>
</html>
浮动的框可以向左或向右移动，直到她的外边缘碰到包含框或另一个浮动框的边框为止。