CSS清除浮动的方法

程序员文章站 2022-03-30 07:59:35

...

我们先看看浮动导致什么样的效果。

正常没有浮动的案例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>清除浮动的方法</title>
        <style type="text/css">
            .container{
                background-color: lightblue;
            }           
        </style>
    </head>
    <body>
        <div class="container">
            <h1>The farthest distance in the world</h1>
            <p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p>
            <p>世界上最遥远的距离,是鱼与飞鸟的距离,一个在天 一个却深潜海底</p>
        </div>
    </body>
</html>

没有浮动的效果图：
CSS清除浮动的方法

给h1和p添加浮动后的案例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>清除浮动的方法</title>
        <style type="text/css">
            .container{
                background-color: lightblue;
            }   
            h1,p{
                float: left;
            }       
        </style>
    </head>
    <body>
        <div class="container">
            <h1>The farthest distance in the world</h1>
            <p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p>
            <p>世界上最遥远的距离,是鱼与飞鸟的距离,一个在天 一个却深潜海底</p>
        </div>
    </body>
</html>

添加浮动后的效果图：
CSS清除浮动的方法

可以看到，对h1和p添加浮动之后，包裹它们的父元素背景颜色没有了，好像不能包裹一样。这就是浮动带来的麻烦，解决的方法有以下几种：

方法一：在包裹浮动元素的父元素中最后加入一个空标签

<div style="clear:both"></div>

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>清除浮动的方法</title>
        <style type="text/css">
            .container{
                background-color: lightblue;
            }           
            h1,p{
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>The farthest distance in the world</h1>
            <p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p>
            <p>世界上最遥远的距离,是鱼与飞鸟的距离,一个在天 一个却深潜海底</p>
            <div style="clear:both"></div>
        </div>
    </body>
</html>

效果图：
CSS清除浮动的方法

缺点：增加一个无意义的标签，违背结构和表现分离的web标准，如果后期维护中添加很多这样的标签会很不方便

方法二：在包裹浮动元素的父元素的css样式中加入overflow：auto；或者overflow:hidden；

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>清除浮动的方法</title>
        <style type="text/css">
            .container{
                overflow: auto;
                background-color: lightblue;
            }           
            h1,p{
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>The farthest distance in the world</h1>
            <p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p>
            <p>世界上最遥远的距离,是鱼与飞鸟的距离,一个在天 一个却深潜海底</p>
        </div>
    </body>
</html>

效果图：
CSS清除浮动的方法

方法三：在包裹浮动元素的父元素的css样式中也设置相应的浮动样式

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>清除浮动的方法</title>
        <style type="text/css">
            .container{
                float: left;
                background-color: lightblue;
            }           
            h1,p{
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>The farthest distance in the world</h1>
            <p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p>
            <p>世界上最遥远的距离,是鱼与飞鸟的距离,一个在天 一个却深潜海底</p>
        </div>
    </body>
</html>

效果图：
CSS清除浮动的方法

缺点：不可能让每一层都建立在一个浮动的层中，这会影响页面布局

方法四：在包裹浮动元素的父元素添加一个css样式clearfix。它的属性如下

.clearfix:before,
.clearfix:after{
    content:" ";
    display: table;
}

.clearfix:after{
    clear:both;
}

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>清除浮动的方法</title>
        <style type="text/css">
            .container{
                background-color: lightblue;
            }           
            h1,p{
                float: left;
            }

            .clearfix:before,
            .clearfix:after{
                content:" ";
                display: table;
            }

            .clearfix:after{
                clear:both;
            }
        </style>
    </head>
    <body>
        <div class="container clearfix">
            <h1>The farthest distance in the world</h1>
            <p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p>
            <p>世界上最遥远的距离,是鱼与飞鸟的距离,一个在天 一个却深潜海底</p>
        </div>
    </body>
</html>

效果图：
CSS清除浮动的方法

最后一种方法比较常用。

CSS清除浮动的方法

tsvulfwman.exe是什么进程 tsvulfwman的清除方法

PHP针对常规模板引擎中与CSS/JSON冲突的解决方法

当把宽度设为25%时，其他浏览器正常，IE7图片会掉下来，有没有好的解决方法_html/css_WEB-ITnose

DIV+CSS三列式布局的实现方法_html/css_WEB-ITnose

css3 伪对象选择器添加几何图形文字的方法

IE6兼容inline-block的方法_html/css_WEB-ITnose

清除浮动4-插入多余的div_html/css_WEB-ITnose

php获取CSS文件中图片地址并下载到本地的方法，

用MySQL函数清除字符串首尾空白字符的方法

jQuery(1.6.3) 中css方法对浮动的实现缺陷分析_jquery