HTML+CSS浮动和清除浮动的效果及其应用场景举例

可可鸭~

已于 2024-08-22 17:05:42 修改

阅读量1.2k

点赞数 15

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html css 前端

于 2024-08-22 17:01:19 首次发布

本文链接：https://blog.csdn.net/qq_43547255/article/details/141432212

一、清除浮动的效果

在这里插入图片描述

解释
.container：用于展示浮动和清除浮动效果的容器，具有边框和背景色以便于区分。
.float-box：浮动元素，用不同的背景色标识。
.clearfix：使用伪元素清除浮动的类，应用于第二个容器。
.clear-box：浮动清除区域，背景色为红色，用于显示清除浮动后的效果。
预期效果
第一个容器：由于没有清除浮动，.clear-box 可能会出现重叠或位置不正确的情况。
第二个容器：使用 .clearfix 类来清除浮动，.clear-box 将正确地显示在浮动元素下方，容器的高度也会正确计算。
这个示例通过颜色和布局的变化来帮助理解浮动和清除浮动的效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动与清除浮动示例</title>
    <style>
      .container {
     
     
        border: 1px solid black;
        padding: 10px;
        margin-bottom: 20px;
        background-color: lightgray;
      }

      .float-box {
     
     
        float: left;
        width: 150px;
        height: 100px;
        margin-right: 10px;