Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 总结六种清除CSS浮动的方法

总结六种清除CSS浮动的方法

发布时间:2020-05-07   编辑:www.jquerycn.cn
jquery中文网为您提供总结六种清除CSS浮动的方法等资源,欢迎您收藏本站,我们将为您提供最新的总结六种清除CSS浮动的方法资源
本人总结的6点清除CSS浮动的方法,各有优缺点,我们可以根据自己的需求选择不同的方法去清除CSS浮动。

1.父元素定义height

<span style="font-family:Microsoft YaHei;"><style>
    .wrapper {
        width:600px;
        height:200px;/* 解决代码 */
        background:red;
    }
    .left {
        float:left;
        width:30%;
        height:100px;
        background:yellow;
    }
    .right {
        float:right;
        width:30%;
        height:100px;
        background:green;
    }
</style>
<div class="wrapper">
    <div class="left">
        鬼眼邪神的博客
    </div>
    <div class="right">
        鬼眼邪神的博客
    </div>
</div></span>

原理:手动定义父元素的高度,解决其不能自动获取高度的问题。

缺点:必须给出精确地高度,无法自适应。

2.利用空标签清浮动

<span style="font-family:Microsoft YaHei;"><style>
    .wrapper {
        width:600px;
        background:red;
    }
    .left {
        float:left;
        width:30%;
        height:100px;
        background:yellow;
    }
    .right {
        float:right;
        width:30%;
        height:100px;
        background:green;
    }
    /* 解决代码 */
    .clear {
        clear:both;
    }
</style>
<div class="wrapper">
    <div class="left">
        鬼眼邪神的博客
    </div>
    <div class="right">
        鬼眼邪神的博客
    </div>
    <div class="clear">
    
    </div>
</div></span>


原理:在父元素的关标签之前加入一空标签,用clear:both来清浮动。

缺点:如果需要清浮动的地方很多,则需要加入很多空标签,很麻烦。

3.父元素设置overflow:hidden

<span style="font-family:Microsoft YaHei;"><style>
    .wrapper {
        width:600px;
        background:red;
        overflow:hidden;
    }
    .left {
        float:left;
        width:30%;
        height:100px;
        background:yellow;
    }
    .right {
        float:right;
        width:30%;
        height:100px;
        background:green;
    }
</style>
<div class="wrapper">
    <div class="left">
        鬼眼邪神的博客
    </div>
    <div class="right">
        鬼眼邪神的博客
    </div>
</div></span>


原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden具有清除内部浮动的效果。

缺点:当与position配合使用时,有可能会造成内容被隐藏。

4.父元素定义伪类:after

<span style="font-family:Microsoft YaHei;"><style>
    .wrapper {
        width:600px;
        background:red;
    }
    /* 解决代码 */
    .wrapper:after {
        display:block;
        clear:both;
        overflow:hidden;
        content:'';
        height:0;
        visibility:hidden;
    }
    .left {
        float:left;
        width:30%;
        height:100px;
        background:yellow;
    }
    .right {
        float:right;
        width:30%;
        height:100px;
        background:green;
    }
</style>
<div class="wrapper">
    <div class="left">
        鬼眼邪神的博客,地址
    </div>
    <div class="right">
        鬼眼邪神的博客,地址
    </div>
</div></span>


原理:使用:after伪类在浮动块后面加上一个非display:none的不可见块状内容来,并给它设置clear:both来清理浮动。

5.父元素定义overflow:auto

<span style="font-family:Microsoft YaHei;"><style>
    .wrapper {
        width:600px;
        background:red;
        overflow:auto;/* 解决代码 */
    }
    .left {
        float:left;
        width:30%;
        height:100px;
        background:yellow;
    }
    .right {
        float:right;
        width:30%;
        height:100px;
        background:green;
    }
</style>
<div class="wrapper">
    <div class="left">
        鬼眼邪神的博客
    </div>
    <div class="right">
        鬼眼邪神的博客
    </div>
</div></span>


原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度

缺点:内容超出父元素宽高时会出现滚动条。

6.父元素设置float属性

<span style="font-family:Microsoft YaHei;"><style>
    .wrapper {
        width:600px;
        background:red;
        float:left;/* 解决代码 */
    }
    .left {
        float:left;
        width:30%;
        height:100px;
        background:yellow;
    }
    .right {
        float:right;
        width:30%;
        height:100px;
        background:green;
    }
</style>
<div class="wrapper">
    <div class="left">
        鬼眼邪神的博客
    </div>
    <div class="right">
        鬼眼邪神的博客
    </div>
</div></span>

您可能感兴趣的文章:
CSS浮动与清除浮动(overflow)例子
jQuery powerFloat万能浮动层下拉层插件使用介绍
jquery自定义函数的多种方法
基于jquery的跟随屏幕滚动代码
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
JQuery结合CSS操作打印样式的方法
如何设计网站结构与地址URL?
jQuery的运行机制和设计理念分析
css浮动元素的居中的例子
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)

[关闭]