一、浮动
浮动是指将元素从文档的正常流中移动到左侧或右侧，直到它的外边缘触碰到包含它的元素或者另一个浮动元素的边缘为止。浮动元素可以向左或向右浮动，也可以同时向左右两侧浮动。
浮动元素的语法如下：
<element style="float:left/right/none;"></element>
其中，float属性可以取三个值：left表示向左浮动，right表示向右浮动，none表示不浮动。
二、定位
定位是指将元素从文档的正常流中完全脱离出来，然后根据top、bottom、left、right属性的值相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于最初的包含块进行定位。
定位元素的语法如下：
<element style="position:absolute/fixed/relative;"></element>
其中，position属性可以取三个值：absolute表示绝对定位，fixed表示固定定位，relative表示相对定位。
三、浮动和定位的例子
下面是一个使用浮动和定位实现的简单布局例子：
<!DOCTYPE html>
<html>
<head>
<title>浮动和定位的例子</title>
<style type="text/css">
#container {
width: 500px;
height: 300px;
border: 1px solid #ccc;
position: relative;
}
#left {
width: 200px;
height: 200px;
background-color: #f00;
float: left;
}
#right {
width: 200px;
height: 200px;
background-color: #0f0;
position: absolute;
top: 50px;
right: 50px;
}
#bottom {
width: 100%;
height: 50px;
background-color: #00f;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
</div>
</body>
</html>