float 几个属性在应用中的小问题

float属性分别为：

none  默认  不浮动 

left      居左边浮动

right   居右边浮动

inherit   继承父类元素的浮动值。（上一级父类元素是居哪里浮动，本元素就继承他。）

1、如果一个元素嵌套到另一个元素里面，并且里面的元素没有加float，如：（图1）

<style type="text/css">
    .box1{
        width: 100px;
        height: 50px;
        border: 3px solid #980c10;
    }
    .box2{
        width: 40px;
        height: 20px;
        border: 3px solid #006600;
    }
</style>
<div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
</div>

       如果一个元素嵌套到另一个元素里面，如果内元素加了float，如：（图2）

<style type="text/css">
    .box1{
        width: 100px;
        height: 50px;
        border: 3px solid #980c10;
    }
    .box2{
        width: 40px;
        height: 20px;
        border: 3px solid #006600;
        float: left;
    }
    .box3{
        width: 40px;
        height: 20px;
        border: 3px solid #006600;
        float: left;
    }
</style>
<div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
</div>

2、元素如果设置了浮动，元素就会脱离正常的文档流。一般在一个元素里面嵌套两个小元素，（或者里面只有一个小元素加了浮动）外面的父元素会自动调整（图1）；

<style type="text/css">
    .box1{
        width: 100px;

        border: 3px solid #980c10;
    }
    .box2{
        width: 40px;
        height: 60px;
        border: 3px solid #006600;
        float: left;
    }
    .box3{
        width: 40px;
        height: 60px;
        border: 3px solid #006600;
    }
</style>
<div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
</div>

如果里面小元素两个都加了浮动，则父元素的高度为0（图2）。

<style type="text/css">
    .box1{
        width: 100px;

        border: 3px solid #980c10;
    }
    .box2{
        width: 40px;
        height: 60px;
        border: 3px solid #006600;
        float: left;
    }
    .box3{
        width: 40px;
        height: 60px;
        border: 3px solid #006600;
        float: right;
    }
</style>
<div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
</div>

3、一个元素内嵌套两个小的元素，给其中一个小元素加浮动，另外一个小元素会自动补齐，不会覆盖第一个小元素。（类似与第一种情况。）