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