我要了解float的各种类型

1.box0左浮动， box1会被覆盖

#box{
        width: 600px;
        font-size: 12px;
        background: orange;
    }
    #box0{
        width: 400px;
        height: 200px;
        float: left;
        background: green;
    }
    #box1{
        width: 100px;
        height: 300px;
        background: red;
    }

<div id="box">  
        box
        <div id="box0">box0</div>
        <div id="box1">box1</div>
    </div>

显示效果



2. box0 , box1都是浮动左浮动的状态, 两框宽度和小于父元素的宽度， 这里是box

<div id="box">  <!-- box为橘色， box0为绿色， box1为红色 -->
        <div id="box0"></div>
        <div id="box1"></div>
    </div>

对应的css为

#box{
        width: 600px;
        font-size: 12px;
        background: orange;
    }
    #box0{
        width: 400px;
        height: 200px;
        float: left;
        background: green;
    }
    #box1{
        width: 100px;
        height: 70px;
        float: left;
        background: red;
    }

在google， ie8， 火狐中显示都为



由于两个子元素box0, box1都设置为浮动了， 所以box就变成了高度为0。就像导航栏全部的li都浮动的话， ul是没有高度的， 这时候你要是

想给ul设背景的话， 是看不到的，亲！

如果要让他显示出来可以下面加一个不浮动的块， 撑起来。

<div id="box">  
        <div id="box0"></div>
        <div id="box1"></div>
        <div id="box2"></div>
    </div>

#box2{
        width: 500px;
        height: 100px;
        background: black;
}

这时候的box的高度等于box2的高度， 但是宽度还是当初设定的600px;

在加个div把他撑起来就显得多余， 我们还是追求跟好的方法

解决方法:

1. 添加一个进行清理的元素， 但是这就增加了无语义标签，所以拜拜


2. 让父元素浮动， 并且使用某个元素清空浮动。

3. 使用overflow: hidden技术

3.
box0 , box1都是浮动左浮动的状态, 两框宽度和大于父元素的宽度， 这里是box

我们将上述代码中的box1的高度设为300px, 这样加起来就会大于box的宽度， 代码如下

#box{
        width: 600px;
        font-size: 12px;
        background: orange;
    }
    #box0{
        width: 400px;
        height: 200px;
        float: left;
        background: green;
    }
    #box1{
        width: 300px;
        height: 70px;
        float: left;
        background: red;
    }
    #box2{
        width: 500px;
        height: 100px;
        background: black;
    }

对于

<div id="box">  
        box
        <div id="box0">box0</div>
        <div id="box1">box1</div>
        <div id="box2">box2</div>
    </div>

显示是



box高度为114px, 因为我们没有给box设置高度， 所以其高度为文本高架上box2高度， 文本的font-size：12px

在火狐中是字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。在google中13.6多像素， ie8也是14px