我要了解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



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值