CSS清除浮动的方法

最新推荐文章于 2021-06-04 01:42:09 发布

林夕梦木子李

最新推荐文章于 2021-06-04 01:42:09 发布

阅读量756

点赞数 3

分类专栏：前端学习笔记文章标签：清除浮动

本文链接：https://blog.csdn.net/qq_37467034/article/details/72478020

版权

前端学习笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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

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

<!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>

没有浮动的效果图：
这里写图片描述

给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>

添加浮动后的效果图：
这里写图片描述

可以看到，对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>

效果图：
这里写图片描述

缺点：增加一个无意义的标签，违背结构和表现分离的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样式中也设置相应的浮动样式

代码如下：

<!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样式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>

效果图：
这里写图片描述

最后一种方法比较常用。

林夕梦木子李

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS清除浮动的方法

我们先看看浮动导致什么样的效果。正常没有浮动的案例如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>清除浮动的方法</title> <style type="text/css"> .container{ bac
复制链接

扫一扫

专栏目录