css浮动跟随

CSS浮动跟随基础概念

CSS浮动（Float）是一种布局技术，它允许元素脱离正常的文档流，向左或向右浮动，直到遇到父容器的边缘或其他浮动元素。浮动元素会影响其周围的元素，使得其他元素可以围绕它进行布局。

类型

左浮动（float: left;）：元素向左浮动。
右浮动（float: right;）：元素向右浮动。
清除浮动（clear: both;）：阻止元素跟随浮动元素。

应用场景

图文混排：图片浮动在文字上方，文字环绕图片。
多栏布局：创建两栏或多栏布局，其中一栏浮动，另一栏占据剩余空间。
导航菜单：浮动可以用于创建水平导航菜单。

遇到的问题及解决方法

问题：浮动元素导致父容器高度塌陷

原因：当子元素浮动后，父容器无法自动扩展以包含这些浮动元素，导致高度塌陷。

解决方法：

使用clearfix技术：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

<div class="container clearfix">
  <div class="float-left">浮动元素</div>
</div>

设置父容器高度：

.container {
  overflow: hidden; /* 或者使用 overflow: auto; */
}

使用Flexbox布局：

.container {
  display: flex;
}

问题：浮动元素影响周围元素布局

原因：浮动元素会脱离正常的文档流，影响其周围的元素布局。

解决方法：

使用clear属性：

.clear {
  clear: both;
}

<div class="float-left">浮动元素</div>
<div class="clear"></div>
<div>正常元素</div>

使用Flexbox或Grid布局：

.container {
  display: flex;
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Float Example</title>
  <style>
    .container {
      border: 1px solid #000;
      padding: 10px;
    }
    .float-left {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
      margin-right: 10px;
    }
    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="float-left"></div>
    <p>这是一段文字，它将环绕在浮动元素周围。</p>
    <div class="clear"></div>
    <p>这是另一段文字，它不会受到浮动元素的影响。</p>
  </div>
</body>
</html>