前端——浮动清除

最新推荐文章于 2023-03-15 17:27:52 发布

yesNow_xiao

最新推荐文章于 2023-03-15 17:27:52 发布

阅读量537

点赞数 1

分类专栏： CSS 文章标签：前端 CSS

本文链接：https://blog.csdn.net/depers15/article/details/51713042

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

当元素浮动时，他就不再占用文档流中的任何空间了，因此，父列表实际上什么东西都没有，他就会收缩，从而隐藏列表的背景，解决这个问题的方法有以下集几种：
方法一：添加一个清理的元素，但是会在页面上添加不必要的元素，所以不建议使用这种办法；
方法二：让父元素浮动，并且使用某个元素（比如站点页脚）对它进行清理，以便换行；
方法三：也就是我们使用最多的方法，采用 overflow:hidden;技术；
方法四：利用相邻元素进行清除浮动；
方法五：使用::after伪元素，content：” “空元素进行清除浮动；

下面让我们通过示例代码来看看：
法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动与清除</title>
    <style type="text/css">
        .news{
            background-color: gray;
            border: solid 1px black;
            width: 500px;
        }
        .news img{
            float: left;
        }
        .news p{
            float: right;
        }
        .clear{
            clear: both;
        } /*方法一*/
    </style>
</head>
<body>
    <div class="news">
        <img src="Apple_1.png" alt="apple">
        <p>Some text</p>
        <br class="clear"> /*方法一*/
    </div>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动与清除</title>
    <style type="text/css">
        .news{
            background-color: gray;
            border: solid 1px black;
            width: 500px;
            float: left;  /*方法二*/
        }
        .news img{
            float: left;
        }
        .news p{
            float: right;
        }
    </style>
</head>
<body>
    <div class="news">
        <img src="Apple_1.png" alt="apple">
        <p>Some text</p>
        <br class="clear" style="clear:both;">  /*方法二*/
    </div>
</body>
</html>

方法三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动与清除</title>
    <style type="text/css">
        .news{
            background-color: gray;
            border: solid 1px black;
            width: 500px;
            overflow: hidden;   /*方法三*/
        }
        .news img{
            float: left;
        }
        .news p{
            float: right;
        }
    </style>
</head>
<body>
    <div class="news">
        <img src="Apple_1.png" alt="apple">
        <p>Some text</p>
    </div>
</body>
</html>

效果如下：
这里写图片描述
方法四：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用相邻元素进行清除浮动</title>
    <style>
        .news {
          background-color: gray;
          border: solid 1px black;
          }

        .news img {
          float: left;
          }

        .news p {
          float: right;
          }

        .content{
          clear:both;
          }

    </style>
</head>
<body>
    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="content"></div>
    </div>
</body>
</html>

方法五：
清除浮动是一个时常会遇到的问题，不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在，无需增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用::after伪元素清除浮动</title>
    <style>
        .news {
          background-color: gray;
          border: solid 1px black;
          }

        .news img {
          float: left;
          }

        .news p {
          float: right;
          }

        .clearfix:after{
          content: " "; 
          display: block; 
          clear: both; 
          visibility: hidden;  /*使该元素不可见*/
          }
    </style>
</head>
<body>
    <div class="news clearfix"> <!-- .news 和 .clearfix是一样的类选择器 -->
    <img src="news-pic.jpg" />
    <p>some text</p>
    </div>
</body>
</html>

yesNow_xiao

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端——浮动清除

当元素浮动时，他就不再占用文档流中的任何空间了，因此，父列表实际上什么东西都没有，他就会收缩，从而隐藏列表的背景，解决这个问题的方法有以下集几种：方法一：添加一个清理的元素，但是会在页面上添加不必要的元素，所以不建议使用这种办法；方法二：让父元素浮动，并且使用某个元素（比如站点页脚）对它进行清理，以便换行；方法三：也就是我们使用最多的方法，采用 overflow:
复制链接

扫一扫

专栏目录