CSS清除浮动方法

rubylLc

于 2024-04-29 16:58:49 发布

阅读量301

点赞数 4

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/rubylLc/article/details/138305429

版权

1.为什么要清除浮动

清除浮动（Clearing floats）在网页设计和开发中是非常重要的，主要有以下几个原因：

1.父元素高度塌陷

当子元素使用浮动（float）布局时，它们会脱离正常的文档流，这意味着父元素不会“看到”这些浮动子元素的高度。如果父元素没有设置具体的高度，它将不会围绕浮动元素展开，这可能导致父元素的高度塌陷为0，从而影响布局和样式。

当父盒子不设置高度，内部放三个盒子，未给三个盒子设置浮动，则他们会默认撑开父盒子

当给内部三个盒子加上float-left属性的时,下面的黑色盒子就会顶上来，父盒子没设置高度，变成一条线

2.文本环绕问题

浮动元素可能会与周围的文本或内联元素重叠，导致文本环绕浮动元素，这在某些情况下可能是期望的效果，但在其他情况下则可能导致布局混乱。

3.元素重叠

浮动元素可能会与其他元素重叠，特别是在没有正确设置元素之间的间距或边界时。

2.清除浮动的四种方法

1.额外标签法

在浮动元素末尾添加一个空标签，如<div style="clear:both"></div>。这个方法简单通俗，容易书写，但会增加很多无意义的标签。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 800px;
        background-color: rgb(255, 80, 109);
        margin-top: 50px;
      }
      .son1 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        float: left;
      }
      .son2 {
        width: 300px;
        height: 300px;
        background-color: rgb(255, 171, 232);
        float: left;
      }
      .son3 {
        width: 200px;
        height: 200px;
        background-color: rgb(212, 254, 194);
        float: left;
      }
      .footer {
        height: 200px;
        background-color: #a4a4a4;
      }
      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son1">1</div>
      <div class="son2">2</div>
      <div class="son3">3</div>
      <div class="clear"></div>
    </div>
    <div class="footer"></div>
  </body>
</html>

2.父级元素添加overflow属性

通过设置父元素的overflow属性为hidden或auto来清除浮动。这种方法通过触发BFC（块级格式化上下文）来阻止浮动影响到父元素的尺寸。

      .father {
        width: 800px;
        background-color: rgb(255, 80, 109);
        margin-top: 50px;
        overflow: hidden;
      }

3.使用伪元素清除浮动（推荐）

利用:after或:before伪元素来清除浮动。这种方法的好处是不用单独加标签。具体可以通过设置伪元素的content、display、clear等属性来实现。

1）使用`:after`伪元素

通过给父元素添加一个:after伪元素，并设置相应的CSS属性来清除浮动。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .clearfix:after {
        /*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .clearfix {
        *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
      }
      .father {
        width: 800px;
        background-color: rgb(255, 80, 109);
        margin-top: 50px;
        overflow: hidden;
      }
      .son1 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        float: left;
      }
      .son2 {
        width: 300px;
        height: 300px;
        background-color: rgb(255, 171, 232);
        float: left;
      }
      .son3 {
        width: 200px;
        height: 200px;
        background-color: rgb(212, 254, 194);
        float: left;
      }
      .footer {
        height: 200px;
        background-color: #a4a4a4;
      }
    </style>
  </head>
  <body>
    <div class="father clearfix">
      <div class="son1">1</div>
      <div class="son2">2</div>
      <div class="son3">3</div>
    </div>
    <div class="footer"></div>
  </body>
</html>

2）使用:before和:after伪元素

除了使用:after伪元素，还可以使用:before伪元素配合来实现清除浮动的效果。这种方法虽然稍微复杂一些，但有时候也能起到特定的作用。

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

      .clearfix::after {
        clear: both;
      }
      .clearfix {
        *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
      }

rubylLc

关注

4
点赞
踩
4

收藏

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

当子元素使用浮动（float）布局时，它们会脱离正常的文档流，这意味着父元素不会“看到”这些浮动子元素的高度。如果父元素没有设置具体的高度，它将不会围绕浮动元素展开，这可能导致父元素的高度塌陷为0，从而影响布局和样式。浮动元素可能会与周围的文本或内联元素重叠，导致文本环绕浮动元素，这在某些情况下可能是期望的效果，但在其他情况下则可能导致布局混乱。当父盒子不设置高度，内部放三个盒子，未给三个盒子设置浮动，则他们会默认撑开父盒子。浮动元素可能会与其他元素重叠，特别是在没有正确设置元素之间的间距或边界时。
复制链接

扫一扫