CSS浮动与定位（一）

浮动 规则

CSS允许浮动任何元素，使用float属性来实现。浮动元素会从正常流中删除，不过他仍然会影响到布局。
首先要明确任何浮动元素都会生成一个块级框，不论这个元素本身是什么。浮动元素会从正常流中删除，对于一个非替换元素，若想使用浮动，需指定宽度width。
CSS2.1关于浮动的规则如下：

1.浮动元素的左（或右）外边界不能超出其包含块的左（或右）外边界。

2.为了防止浮动元素重叠，一个浮动元素的左（或右）外边界应当是其前面的浮动元素的右（或左）外边界，除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面，如下图：

<div id="father">
    <p>
    This is a paragraph,my name is <em>ChengKang</em>,
    my girl is <strong>PengKe</strong>.
    </p>
</div>

p em,p strong
{
    float:left;
    border:1px solid black;
}

效果如下图所示：
可以发现后浮动的strong元素的左外边界是在先浮动的em元素的右外边界上（因为这里并没有设置其外边界属性，所以默认为0）.

3.还是为了防止浮动元素重叠，左浮动元素的右外边界不会在其右浮动元素的左外边界，右浮动元素的左外边界不会在其左浮动元素的右外边及左边。比较绕口，看下实例：

<div id="father">
    <img src="TU.jpg" alt="tupian" class="leftcls">
    <img src="TU.jpg" alt="tupian" class="rightcls">
</div>

div#father
{
    border:1px solid black;
    background-color:silver;
    width:800px;
}
img.leftcls
{
    width:500px;
    float:left;
}
img.rightcls
{
    width