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

devtools/2025/3/29 9:31:53/

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>css">.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>css">.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>css">* {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>css">* {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>css">* {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>css">* {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 浮动与清除浮动在实际开发中的广泛应用，从简单的布局到复杂的效果实现，它们都发挥着重要的作用。


http://www.ppmy.cn/devtools/171441.html

相关文章

C#里使用libxl来合并单元格的例子

C#里使用libxl来合并单元格的例子

操作EXCEL的文件格式是常用的功能&#xff0c; 通过不同的单元格的合并&#xff0c;可以生成不同的表格。 如下图所示&#xff1a; 采用libxl来创建上面的EXCEL&#xff0c;使用下面的代码来实现&#xff1a; private void button8_Click(object sender, EventArgs e) {var …
阅读更多...
PostgreSQL 数据库中导入大量数据

PostgreSQL 数据库中导入大量数据

在 PostgreSQL 数据库中导入大量数据，可根据数据来源和格式选择不同的方法。以下为你详细介绍几种常见的方式： 1. 使用 COPY 命令（适用于本地数据文件） COPY 命令是 PostgreSQL 内置的高效数据导入工具，适合处理本地的数据文件。 步骤 准备数据文件 确保你的数据文件格…
阅读更多...
【QA】Qt有哪些迭代器模式的应用？

【QA】Qt有哪些迭代器模式的应用？

在 Qt/C 中&#xff0c;迭代器模式的设计主要分为 标准 C 风格 和 Qt 框架特有风格&#xff0c;以下结合代码详细说明两种实现方式的关键设计及其应用场景&#xff1a; 一、Qt 框架中的迭代器模式设计 Qt 提供了两种迭代器风格&#xff1a;Java 风格&#xff08;显式迭代器&am…
阅读更多...
如何快速下载并安装 Postman？

如何快速下载并安装 Postman？

从下载、安装、启动 Postman 这三个方面为大家详细讲解下载安装 Postman 每一步操作&#xff0c;帮助初学者快速上手。 Postman 下载及安装教程(2025最新)
阅读更多...
寻找重复数 - LeetCode 287 题解笔记

寻找重复数 - LeetCode 287 题解笔记

寻找重复数 - LeetCode 287 题解笔记 问题描述 给定一个包含 n 1 个整数的数组 nums&#xff0c;其数字都在 [1, n] 范围内&#xff08;包括 1 和 n&#xff09;&#xff0c;已知至少存在一个重复的整数。假设 nums 只有一个重复的整数&#xff0c;返回这个重复的数。 要求…
阅读更多...
批量启动远程服务

批量启动远程服务

在ZooKeeper集群中&#xff0c;需要启动所有服务节点&#xff08;至少达到法定人数&#xff09;才能保证集群正常对外提供服务&#xff0c;一下是批量启动服务的脚本 编写启动脚本 vim start_servers.sh #判断参数个数 if [ $# -lt 1 ]; thenecho "错误&#xff1a;请输…
阅读更多...
卷积神经网络的原理、实现及变体

卷积神经网络的原理、实现及变体

卷积神经网络convolutional neural network&#xff0c;CNN 是为处理图像数据而生的网络&#xff0c;主要由卷积层&#xff08;填充和步幅&#xff09;、池化层&#xff08;汇聚层&#xff09;、全连接层组成。 卷积 虽然卷积层得名于卷积&#xff08;convolution&#xff09…
阅读更多...
补充--HTTP常见的状态码

补充--HTTP常见的状态码

1xx&#xff08;信息性状态码&#xff09; - 表示接收的进程正在请求中&#xff0c;客户端应继续其操作。 100 Continue&#xff08;继续&#xff09;: 客户端应该继续其请求。 101 Switching Protocols&#xff08;切换协议&#xff09;: 服务器根据客户端的请求切换协议。 …
阅读更多...
最新文章

Copyright @ 2022~2023