CSS3学习教程，从入门到精通，CSS3 浮动与清除浮动语法知识点及案例代码（14）

知识分享小能手2025-03-23 7:08

CSS3 浮动与清除浮动语法知识点及案例代码

一、浮动基础

浮动语法

css 复制代码 
选择器 {
  float: left|right|none|initial|inherit;
}
  • left：元素向左浮动。
  • right：元素向右浮动。
  • none：默认值，元素不浮动。
  • initial：使用默认值。
  • inherit：继承父元素的浮动属性。

浮动特点

  1. 浮动元素会脱离文档流。
  2. 浮动元素会尽可能地向左或向右移动，直到遇到包含框的边缘或其他浮动元素。
  3. 块级元素浮动后可以设置宽度和高度。
  4. 浮动元素后的文本会环绕在浮动元素周围。

二、清除浮动

清除浮动语法

css 复制代码 
选择器 {
  clear: none|left|right|both|initial|inherit;
}
  • none：默认值，允许两侧有浮动元素。
  • left：不允许左侧有浮动元素。
  • right：不允许右侧有浮动元素。
  • both：不允许两侧有浮动元素。
  • initial：使用默认值。
  • inherit：继承父元素的清除属性。

清除浮动方法

  1. 使用 clear 属性

    css 复制代码 
    .clear {
  clear: both;
}

  2. 使用 overflow 属性

    css 复制代码 
    .parent {
  overflow: hidden;
}

  3. 使用 clearfix 技巧

    css 复制代码 
    .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

三、案例代码

案例一：简单的浮动布局

html 复制代码 
<!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 {
      width: 600px;
      margin: 0 auto;
      border: 1px solid #ccc;
    }
    .left {
      float: left;
      width: 200px;
      height: 200px;
      background-color: #f99;
    }
    .right {
      float: right;
      width: 200px;
      height: 200px;
      background-color: #9f9;
    }
    .content {
      margin: 0 210px;
      height: 200px;
      background-color: #99f;
    }
    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">左侧浮动</div>
    <div class="right">右侧浮动</div>
    <div class="content">中间内容</div>
    <div class="clear"></div>
  </div>
</body>
</html>

注释：

  • .container：设置容器宽度和边框。
  • .left：向左浮动，设置宽度、高度和背景色。
  • .right：向右浮动，设置宽度、高度和背景色。
  • .content：设置中间内容的宽度、高度和背景色。
  • .clear：清除浮动。

案例二：清除浮动的多种方法

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动</title>
  <style>
    .parent {
      border: 1px solid #ccc;
      margin-bottom: 20px;
    }
    .child {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #f99;
    }
    /* 方法一：使用 clear 属性 */
    .clear {
      clear: both;
      height: 0;
      font-size: 0;
      line-height: 0;
    }
    /* 方法二：使用 overflow 属性 */
    .parent.overflow {
      overflow: hidden;
    }
    /* 方法三：使用 clearfix 技巧 */
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <h2>方法一：使用 clear 属性</h2>
  <div class="parent">
    <div class="child"></div>
    <div class="clear"></div>
  </div>

  <h2>方法二：使用 overflow 属性</h2>
  <div class="parent overflow">
    <div class="child"></div>
  </div>

  <h2>方法三：使用 clearfix 技巧</h2>
  <div class="parent clearfix">
    <div class="child"></div>
  </div>
</body>
</html>

注释：

  • .parent：设置父容器的边框和底部外边距。
  • .child：向左浮动，设置宽度、高度和背景色。
  • .clear：使用 clear 属性清除浮动。
  • .parent.overflow：使用 overflow 属性清除浮动。
  • .clearfix::after：使用 clearfix 技巧清除浮动。

以下是开发中常用的实际具体案例，帮助你更好地理解和应用 CSS3 浮动与清除浮动：

案例三：导航栏布局

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>导航栏布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .nav {
      width: 100%;
      height: 60px;
      background-color: #333;
    }
    .logo {
      float: left;
      width: 200px;
      height: 60px;
      background-color: #444;
      line-height: 60px;
      text-align: center;
      color: white;
    }
    .menu {
      float: left;
    }
    .menu-item {
      float: left;
      width: 100px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: white;
      list-style: none;
    }
    .user {
      float: right;
      width: 150px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: white;
    }
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="nav clearfix">
    <div class="logo">LOGO</div>
    <ul class="menu">
      <li class="menu-item">首页</li>
      <li class="menu-item">产品</li>
      <li class="menu-item">服务</li>
      <li class="menu-item">关于我们</li>
    </ul>
    <div class="user">登录/注册</div>
  </div>
</body>
</html>

注释：

  • *：重置所有元素的外边距和内边距，并设置盒模型为 border-box。
  • .nav：设置导航栏的宽度、高度和背景色。
  • .logo：向左浮动，设置宽度、高度、背景色、行高和文本对齐方式。
  • .menu：向左浮动，包含菜单项。
  • .menu-item：向左浮动，设置宽度、高度、行高、文本对齐方式、颜色和列表样式。
  • .user：向右浮动，设置宽度、高度、行高、文本对齐方式和颜色。
  • .clearfix::after：使用 clearfix 技巧清除浮动，确保导航栏的高度正常。

案例四：产品列表展示

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品列表展示</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      width: 1000px;
      margin: 0 auto;
    }
    .product-list {
      overflow: hidden; /* 清除浮动 */
    }
    .product-item {
      float: left;
      width: 230px;
      height: 300px;
      margin: 10px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 10px;
    }
    .product-img {
      width: 100%;
      height: 200px;
      background-color: #eee;
      margin-bottom: 10px;
    }
    .product-name {
      font-size: 16px;
      margin-bottom: 5px;
    }
    .product-price {
      color: #ff6000;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="product-list">
      <div class="product-item">
        <div class="product-img"></div>
        <div class="product-name">产品名称1</div>
        <div class="product-price">¥199</div>
      </div>
      <div class="product-item">
        <div class="product-img"></div>
        <div class="product-name">产品名称2</div>
        <div class="product-price">¥299</div>
      </div>
      <div class="product-item">
        <div class="product-img"></div>
        <div class="product-name">产品名称3</div>
        <div class="product-price">¥399</div>
      </div>
      <div class="product-item">
        <div class="product-img"></div>
        <div class="product-name">产品名称4</div>
        <div class="product-price">¥499</div>
      </div>
    </div>
  </div>
</body>
</html>

注释：

  • .container：设置容器的宽度和居中。
  • .product-list：设置产品列表的清除浮动方式为 overflow: hidden。
  • .product-item：向左浮动，设置宽度、高度、外边距、背景色、边框、圆角和内边距。
  • .product-img：设置产品图片的宽度、高度、背景色和外边距。
  • .product-name：设置产品名称的字体大小和外边距。
  • .product-price：设置产品价格的颜色和字体粗细。

案例五：文字环绕图片

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字环绕图片</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .image-wrapper {
      float: left;
      width: 200px;
      margin-right: 20px;
    }
    .image {
      width: 100%;
      height: 150px;
      background-color: #eee;
    }
    .text {
      font-size: 14px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="image-wrapper">
      <div class="image"></div>
    </div>
    <div class="text">
      <p>这里是环绕图片的文字内容，图片向左浮动，文字环绕在图片右侧显示。通过浮动实现文字环绕图片的效果，使页面布局更加美观和灵活。</p>
      <p>浮动的图片脱离了文档流，但文字会自动环绕在图片周围，形成自然的排版效果。在实际开发中，这种布局常用于文章、新闻等内容的展示，提升用户体验。</p>
    </div>
  </div>
</body>
</html>

注释：

  • .container：设置容器的宽度、居中和内边距。
  • .image-wrapper：向左浮动，设置宽度和右侧外边距。
  • .image：设置图片的宽度、高度和背景色。
  • .text：设置文字的字体大小和行高。

案例六：表单布局

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    .form-group {
      margin-bottom: 20px;
    }
    .label {
      float: left;
      width: 100px;
      text-align: right;
      margin-right: 10px;
      line-height: 30px;
    }
    .input-wrapper {
      margin-left: 110px;
    }
    .input {
      width: 100%;
      height: 30px;
      padding: 0 5px;
      border: 1px solid #ddd;
      border-radius: 3px;
    }
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="form-group clearfix">
      <label class="label">用户名：</label>
      <div class="input-wrapper">
        <input type="text" class="input">
      </div>
    </div>
    <div class="form-group clearfix">
      <label class="label">密码：</label>
      <div class="input-wrapper">
        <input type="password" class="input">
      </div>
    </div>
    <div class="form-group clearfix">
      <label class="label">邮箱：</label>
      <div class="input-wrapper">
        <input type="email" class="input">
      </div>
    </div>
  </div>
</body>
</html>

注释：

  • .container：设置容器的宽度、居中和内边距。
  • .form-group：设置表单组的底部外边距。
  • .label：向左浮动，设置宽度、文本对齐方式、右侧外边距和行高。
  • .input-wrapper：设置输入框容器的左侧外边距，使输入框与标签对齐。
  • .input：设置输入框的宽度、高度、内边距、边框和圆角。
  • .clearfix::after：使用 clearfix 技巧清除浮动，确保表单组的高度正常。

通过以上案例，你可以看到 CSS3 浮动与清除浮动在实际开发中的广泛应用，从简单的布局到复杂的效果实现，它们都发挥着重要的作用。

相关推荐
世人万千丶1 天前
Flutter 框架跨平台鸿蒙开发 - 恐惧清单应用
学习·flutter·华为·开源·harmonyos·鸿蒙
涡能增压发动积1 天前
同样的代码循环 10次正常 循环 100次就抛异常？自定义 Comparator 的 bug 让我丢尽颜面
后端
yuzhuanhei1 天前
Visual Studio 配置C++opencv
c++·学习·visual studio
Wenweno0o1 天前
0基础Go语言Eino框架智能体实战-chatModel
开发语言·后端·golang
于慨1 天前
Lambda 表达式、方法引用（Method Reference）语法
java·前端·servlet
石小石Orz1 天前
油猴脚本实现生产环境加载本地qiankun子应用
前端·架构
swg3213211 天前
Spring Boot 3.X Oauth2 认证服务与资源服务
java·spring boot·后端
从前慢丶1 天前
前端交互规范（Web 端）
前端
tyung1 天前
一个 main.go 搞定协作白板：你画一笔，全世界都看见
后端·go
像我这样帅的人丶你还1 天前
别再让JS耽误你进步了。
css·vue.js
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05Oh My Codex 快速使用指南06VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）07Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）08CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南09UV安装并设置国内源10实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了