欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

教老婆学前端系列一，怎么清除浮动，clearfix方案

程序员文章站 2024-01-29 22:50:58
...
<!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:aaa@qq.com">aaa@qq.com</a>.</p>
    </footer>
</body>
</html>

这是网页效果的截图：

教老婆学前端系列一，怎么清除浮动，clearfix方案

以上代码，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:aaa@qq.com">aaa@qq.com</a>.</p>
    </footer>
</body>
</html>

教老婆学前端系列一，怎么清除浮动，clearfix方案

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

下面我们来研究下::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:aaa@qq.com">aaa@qq.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>

上一篇： 不通过dsn访问sql server

下一篇： 理解为何需要清除浮动及清除浮动的方法

推荐阅读