本节内容：position、float、clear、浮动布局例子、百分比宽度
position
CSS中的position属性设置元素的位置。属性值：static、relative、fixed、absolute。
static
static属性是默认值。任意的position:static；的元素不会被特殊的定位。一个static元素表示它不会定位，一个position属性被设置为其他值的元素表示它会被定位。
relative
Relative表现的和static一样，除非添加了一些额外的属性。在一个相对定位（position属性的值为relative）的元素上设置top、right、bottom、left属性会使其偏离正常位置。其他的元素则不会调整位置来弥补它偏移后剩下的空隙。以上两个类分别为relative1和relative2的div都设置了position:relative;属性，当relative2设置了top:-20px;时，可以看见它相对于自己原本的位置发生了改变，向上移了20个像素（因为这个值是负值，如果是正值，则向下移动20px）；后又设置了left:20px;属性（left:20px；意思是距离左边20px，而不是向左移动20px），所以该div又向右移动20px。记住position:relative;属性如果不设置top、bottom、left、right等属性，它本身的位置是不会发生改变的；如果设置了，则是相对于它原本应该在的位置发生改变。
fixed
一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和relative一样，top、right、bottom和left属性都可用。
一个固定定位元素不会保留它原本在页面应有的空隙。
absolute
absolute是最棘手的position值。absoulute于fixed的表现类似，除了它不是相对于浏览器窗口而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素（会一直向上搜索，直到找到一个祖先元素有position属性），并且找不到有position属性的祖先元素，那么它会相对于文档的body元素，并且它会随页面的滚动而移动。注意：“positioned”元素是指position值不是static的元素。
relative类div是相对定位。如果它是position:static;，那么它的绝对定位子元素会跳过它直接相对于body元素定位。
可以看见上图中两个div分别是类为：relative和absolute;relative类的div设置了属性positive值，absolute类设置了positives：absolute；并设置了top:120px;right:0;所以absolute相对于relative(因为relative这个div是它的有positive属性的祖先元素)向下移动120像素，并向右贴近relative类div（因为right:0;表示距离右边0像素）。
示例：一个页面布局：
在section里填充了许多文字，使得容器比nav元素高，此时可以正常工作；如果把section里的文字去掉，那么容器比nav元素低，此时nav元素会溢出到容器的外面。
float
另一个布局中常用的属性使float。Float可以实现文字环绕图片。如图：
img{
float:right;
margin:0 0 lem lem;
width:100px;
height:100px;
}
clear
clear属性被用于控制浮动。
在这个例子中，section元素实际上是在div之后的（DOM结构上），然而div元素是浮动在左边的，于是section中的文字就围绕了div，并且section元素包围了整个元素。如果我们想让section显示浮动元素之后呢？
使用clear就可以将section移动到浮动元素div下面。需要用left值才能清除元素的左浮动。还可以用right或both来清除右浮动或同时向左向右浮动。其实清除浮动的方法有很多，并不限于使用clear这个属性，也可以设置伪元素来清除浮动。
overflow
在使用浮动时，经常会遇到下面的情形：
为了解决这个问题引入一个新的属性：overflow
浮动布局例子
完全使用float来实现页面布局时很常见的。这里实现一个前面用position实现的布局。
这个例子和之前那个外观一样。这里在container类的div上添加了overflow属性，此时即使nav里的高度比container（非浮动）高也不会溢出了。
百分比宽度
百分比是一种相对于包含块的计量单位。它对图像很有用：
设置图片的width:50%,且图片包含在div中，显示如上图。
来源：https://www.cnblogs.com/ycc-020/p/6091516.html