前端经典问题，怎么清除浮动，clearfix方案

最新推荐文章于 2023-10-21 21:46:54 发布

SuperAvalon

最新推荐文章于 2023-10-21 21:46:54 发布

阅读量760

点赞数 1

分类专栏：前端文章标签：清除浮动 clearfix CSS伪元素

本文链接：https://blog.csdn.net/think2017/article/details/78617432

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先给到下面的html代码，看下有什么问题，如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>clearfix如何清除浮动</title>
<style media="screen" type="text/css">
.container{
    border:1px solid red;
}
.container img{
    float:left;
}
.container p{
    float:right;
    width:350px;
}
footer {
    background-color:gray;
}
</style>
</head>
<body>
    <main>
        <div class="container clearfix">
            <img src="./images/9-1.jpg" />
            <p>我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，</p>
        </div>
    </main>
    <footer>
      <p>Posted by: Eric</p>
      <p>Contact information: <a href="mailto:think2017@gmail.com">think2017@gmail.com</a>.</p>
    </footer>
</body>
</html>

这是网页效果的截图：

在这里插入图片描述

以上代码，div容器中有两个子元素，分别是img标签和p标签，img标签左浮动，p标签右浮动，这样就会导致父元素div的高度为零，变成了一条直线，下面的footer元素会紧挨着div，左右部分会隐藏在浮动的 img 和 p标签下面，解决此问题的办法就是引入clearfix方案，如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>clearfix如何清除浮动</title>
<style media="screen" type="text/css">
.container{
    border:1px solid red;
}
.container img{
    float:left;
}
.clearfix:before,
.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.container p{
    float:right;
    width:350px;
}
footer {
    background-color:gray;
}
</style>
</head>
<body>
    <main>
        <div class="container clearfix">
            <img src="./images/9-1.jpg" />
            <p>我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，我爱中国，</p>
        </div>
    </main>
    <footer>
      <p>Posted by: Eric</p>
      <p>Contact information: <a href="mailto:think2017@gmail.com">think2017@gmail.com</a>.</p>
    </footer>
</body>
</html>

在这里插入图片描述

以上方案，就实现了清除浮动。

下面我们来研究下::before 和 ::after 是用来干嘛的，
CSS中::before 和 ::after 是一种伪元素，用于在某个元素之前或者之后插入一些内容，为了更加直观的理解这两种伪元素，以及和display:table; 组合使用效果，我做以下尝试：

<body>
    <main>
        <div class="container">
            <table><tr><td></td></tr></table>
            <img src="./images/9-1.jpg" />
            <p>我是一个粉刷匠，粉刷本领强。我是一个粉刷匠，粉刷本领强。我是一个粉刷匠，粉刷本领强。我是一个粉刷匠，粉刷本领强。我是一个粉刷匠，粉刷本领强。我是一个粉刷匠，粉刷本领强。我是一个粉刷匠，粉刷本领强。我是一个粉刷匠，粉刷本领强。我是一个粉刷匠，粉刷本领强。我是一个粉刷匠，粉刷本领强。我是一个粉刷匠，粉刷本领强。我是一个粉刷匠，粉刷本领强。我是一个粉刷匠，粉刷本领强。</p>
            <table style="clear:both;"><tr><td></td></tr></table>
        </div>
    </main>
    <footer>
      <p>Posted by: Eric</p>
      <p>Contact information: <a href="mailto:think2017@gmail.com">think2017@gmail.com</a>.</p>
    </footer>
</body>

以上代码也实现了清除浮动，因为有了这两个table元素，父元素div就获得了高度，高度为img标签和p标签两者中最高的，当然先不考虑示例新增的table元素高度的影响。然后通过底部的table指定 clear:both; 就实现了清除浮动。

总结下，clearfix方案，其实等价于在目标div元素内部中的顶部和底部分别插入一个table元素，然后对底部table元素指定clear:both;因此实现了清楚浮动。

clearfix代码很简单，如下：

<style media="screen" type="text/css">
.clearfix:before,
.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
</style>

SuperAvalon

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端经典问题，怎么清除浮动，clearfix方案

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/&gt; &lt;title&gt;clearfix如何清除浮动&lt;/title&gt;&l
复制链接

扫一扫

专栏目录