【前端每日基础】day18——css清除浮动

最新推荐文章于 2024-07-12 16:27:40 发布

modaoshi51991

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量490

点赞数 12

分类专栏：前端每日基础文章标签：前端 css

本文链接：https://blog.csdn.net/modaoshi51991/article/details/139013013

版权

前端每日基础专栏收录该内容

45 篇文章 1 订阅

订阅专栏

在CSS中，浮动（float）是一种常见的布局技术，但它常常导致父容器的高度无法自动扩展以包含浮动的子元素。这时就需要清除浮动。以下是几种常用的清除浮动的方法：

使用清除元素（Clearfix）
Clearfix 是一种经典的解决方案，通过添加一个伪元素来清除浮动。可以使用现代CSS伪元素来实现。

/* Clearfix 方法 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后在需要清除浮动的父容器上应用 clearfix 类。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Clearfix Example</title>
  <style>
    .container {
      background-color: lightblue;
      padding: 10px;
    }

    .box {
      float: left;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightcoral;
    }

    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container clearfix">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

使用 overflow 属性
通过给父容器设置 overflow: hidden 或 overflow: auto，可以强制其包含浮动的子元素。

.container {
  background-color: lightblue;
  padding: 10px;
  overflow: hidden; /* 或者使用 overflow: auto; */
}

这种方法适用于内容不会溢出容器的情况，否则会导致内容被剪裁。

使用浮动后面的块级元素清除浮动
在所有浮动元素之后添加一个具有 clear: both 的块级元素。这种方法需要额外的HTML标签，不是最优雅的解决方案。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Clear Both Example</title>
  <style>
    .container {
      background-color: lightblue;
      padding: 10px;
    }

    .box {
      float: left;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightcoral;
    }

    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="clear"></div>
  </div>
</body>
</html>

使用伪元素 :before 和 :after
这是更现代的clearfix实现，通过添加伪元素来清除浮动。

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

.container::after {
  clear: both;
}

同样地，在父容器上应用该样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern Clearfix Example</title>
  <style>
    .container::before,
    .container::after {
      content: "";
      display: table;
    }

    .container::after {
      clear: both;
    }

    .container {
      background-color: lightblue;
      padding: 10px;
    }

    .box {
      float: left;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

使用Flexbox布局
在使用CSS Flexbox布局时，父容器会自动包含浮动子元素，因此不需要额外清除浮动。

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: lightblue;
  padding: 10px;
}

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: lightcoral;
}

Flexbox可以简化布局，减少对清除浮动的需求。

modaoshi51991

关注

12
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【前端每日基础】day18——css清除浮动

在CSS中，浮动（float）是一种常见的布局技术，但它常常导致父容器的高度无法自动扩展以包含浮动的子元素。通过给父容器设置 overflow: hidden 或 overflow: auto，可以强制其包含浮动的子元素。在使用CSS Flexbox布局时，父容器会自动包含浮动子元素，因此不需要额外清除浮动。这是更现代的clearfix实现，通过添加伪元素来清除浮动。然后在需要清除浮动的父容器上应用 clearfix 类。Flexbox可以简化布局，减少对清除浮动的需求。同样地，在父容器上应用该样式。
复制链接

扫一扫