2. 清除浮动

书诚小驿2025/02/22前端面经Css

参考答案

DETAILS

定义:

清除浮动（Clearing Floats）是 CSS 中一个常见的问题，特别是在布局中使用浮动（float）属性时。当浮动元素的父元素无法自动包含这些浮动子元素时，可能会导致布局问题。浮动元素会脱离文档流，导致父元素无法自动包含这些浮动子元素

1、使用 clear 属性

在浮动元素之后添加一个空的块级元素，并设置其 clear 属性为 both

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clear Float Example</title>
    <style>
      .container {
        border: 1px solid black;
      }
      .float-left {
        float: left;
        background-color: lightblue;
        padding: 10px;
      }
      .float-right {
        float: right;
        background-color: lightgreen;
        padding: 10px;
      }
      .clear-float {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="clear-float"></div>
    </div>
  </body>
</html>

2、使用 overflow 属性

给父元素设置 overflow: hidden 或 overflow: auto，可以自动清除浮动。

<div style="border: 1px solid black; overflow: hidden;">
  <div style="float: left;">Left Float</div>
  <div style="float: right;">Right Float</div>
</div>

3、使用 clearfix 类

通过 CSS 创建一个 clearfix 类，使用伪元素来清除浮动。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clear Float Example</title>
    <style>
      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }
    </style>
  </head>

  <body>
    <div class="clearfix" style="border: 1px solid black;">
      <div style="float: left;">Left Float</div>
      <div style="float: right;">Right Float</div>
    </div>
  </body>
</html>

4、使用 display: flow-root

CSS3 引入了 display: flow-root 属性，可以自动清除浮动。

<div style="border: 1px solid black; display: flow-root;">
  <div style="float: left;">Left Float</div>
  <div style="float: right;">Right Float</div>
</div>

5、使用 flexbox 或 grid

如果可以使用现代的布局方式，如 flexbox 或 grid，可以避免使用浮动，从而自然地解决浮动问题。

<div id="box1" style="border: 1px solid black; display: flex;">
  <div style="flex: 1;">Left</div>
  <div style="flex: 1;">Right</div>
</div>
<div
  id="box2"
  style="border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr;"
>
  <div>Left</div>
  <div>Right</div>
</div>