前端CSS：CSS浮动

于 2024-08-24 21:11:33 发布
阅读量174 收藏 6
点赞数 4
分类专栏： HTML网站开发 # 前端基础入门三大核心之CSS 文章标签： HTML CSS web css3 网页开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/black_cat7/article/details/141505021
版权

前端CSS：CSS浮动

引言

在前端开发中，CSS浮动是一种常见的布局技术，用于控制元素在文档流中的位置。通过浮动，我们可以使元素脱离正常的文档流，从而实现诸如左右对齐、图像环绕文本等布局效果。本文将深入探讨CSS浮动的基本概念、应用场景以及实际开发中的一些技巧和注意事项。

CSS浮动基本概念

定义

CSS浮动（Float）允许元素从文档流中移出，并向左或向右移动，直到碰到父容器的边界或另一个浮动元素为止。浮动元素周围的非浮动元素（通常是文本）会围绕着浮动元素重新排列。

属性值

  • float: left;：元素向左浮动。
  • float: right;：元素向右浮动。
  • float: none;：元素不浮动（默认值）。

浮动的影响

  • 元素脱离正常文档流：浮动元素不再占据正常文档流中的空间，其他元素可以绕过它。
  • 影响周围元素布局：非浮动元素会围绕浮动元素进行重排。
  • 容器塌陷：如果容器内所有子元素都浮动了，容器的高度会塌陷，即高度为0，除非采取措施来清除浮动。

示例与详细说明

示例一：基本的浮动示例

HTML 结构
<!DOCTYPE html>
<html>
<head>
  <style>
    .image {
      float: left;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <img src="example-image.jpg" alt="Example Image" class="image">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
解析

在这个例子中，.image 被设置为左浮动。结果是文本环绕在图像的右侧。

示例二：多个元素浮动

HTML 结构
<!DOCTYPE html>
<html>
<head>
  <style>
    .item {
      float: left;
      width: 30%;
      margin: 10px;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</body>
</html>
解析

在这个例子中，三个 .item 元素都被设置为左浮动，并且设置了宽度和外边距。结果是这些元素在同一行上并排显示。

示例三：清除浮动

HTML 结构
<!DOCTYPE html>
<html>
<head>
  <style>
    .item {
      float: left;
      width: 30%;
      margin: 10px;
      background-color: #f1f1f1;
    }

    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="clearfix">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

  <p>This paragraph will not be affected by the floating items.</p>
</body>
</html>
解析

在这个例子中，.clearfix 类使用伪元素 ::after 和 clear: both; 来清除浮动。结果是 .clearfix 容器包含了浮动元素，并且后续的段落不会受到影响。

示例四：使用浮动创建简单导航栏

HTML 结构
<!DOCTYPE html>
<html>
<head>
  <style>
    .nav {
      overflow: auto;
    }

    .nav-item {
      float: left;
      padding: 10px;
      background-color: #f1f1f1;
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <div class="nav">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
    <div class="nav-item">Services</div>
    <div class="nav-item">Contact</div>
  </div>
</body>
</html>
解析

在这个例子中，.nav 容器使用 overflow: auto; 来包含浮动的 .nav-item 元素。结果是一个简单的水平导航栏。

示例五：使用浮动创建多列布局

HTML 结构
<!DOCTYPE html>
<html>
<head>
  <style>
    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <div class="columns">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</body>
</html>
解析

在这个例子中，.column 类使用浮动和宽度设置来创建一个三列布局。每个 .column 元素宽度为33.33%，结果是三个元素并排显示。

不同角度的功能使用思路

结合使用浮动和其他布局技巧

结合使用浮动和其他布局技巧可以创建更复杂的布局效果。

示例六：结合使用浮动和Flexbox
HTML 结构
<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      float: left;
      width: 50%;
      margin: 10px;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</body>
</html>
解析

在这个例子中，.container 被设置为Flex容器，而 .item 元素使用浮动和宽度设置来创建一个两列布局。Flexbox的 flex-wrap: wrap; 属性允许元素在需要时换行。

利用浮动增强布局灵活性

通过合理设置浮动属性，可以显著提高布局的灵活性。

示例七：利用浮动增强布局灵活性
HTML 结构
<!DOCTYPE html>
<html>
<head>
  <style>
    .item {
      float: left;
      width: 25%;
      margin: 10px;
      background-color: #f1f1f1;
    }

    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="clearfix">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</body>
</html>
解析

在这个例子中，四个 .item 元素使用浮动和宽度设置来创建一个四列布局。通过使用 clear: both; 清除浮动，保证了容器能够包含所有的浮动元素。

实际工作中的使用技巧

  1. 使用overflow: auto;或overflow: hidden;来包含浮动：为了防止容器塌陷，可以使用 overflow: auto; 或 overflow: hidden; 来包含内部的浮动元素。
  2. 使用伪元素清除浮动：如上述示例所示，可以使用伪元素 ::after 和 clear: both; 来清除浮动。
  3. 考虑使用Flexbox或Grid：虽然浮动仍然有用，但在现代布局中，Flexbox和Grid提供了更加强大和灵活的布局选项。
  4. 注意浮动元素之间的间距：通过设置适当的外边距和内边距来控制浮动元素之间的间距。
  5. 考虑响应式设计：在响应式设计中，使用媒体查询来调整浮动元素的行为，以适应不同屏幕尺寸。

自行拓展内容

利用浮动实现响应式设计

在响应式设计中，利用浮动可以实现更加灵活的布局。

示例八：利用浮动实现响应式设计
HTML 结构
<!DOCTYPE html>
<html>
<head>
  <style>
    .item {
      float: left;
      width: 50%;
      margin: 10px;
      background-color: #f1f1f1;
    }

    @media (max-width: 600px) {
      .item {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</body>
</html>
解析

在这个例子中，四个 .item 元素使用浮动和宽度设置来创建一个两列布局。当屏幕宽度小于600px时，每个元素的宽度变为100%，以适应较小的屏幕尺寸。

利用浮动处理多语言文本

在处理多语言文本时，合理设置浮动属性可以提高文本的可读性和美观度。

示例九：利用浮动处理多语言文本
HTML 结构
<!DOCTYPE html>
<html>
<head>
  <style>
    .item {
      float: left;
      width: 50%;
      margin: 10px;
      background-color: #f1f1f1;
      direction: rtl;
    }

    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="clearfix">
    <div class="item">نص عربي</div>
    <div class="item">English Text</div>
  </div>
</body>
</html>
解析

在这个例子中，两个 .item 元素使用浮动和宽度设置来创建一个两列布局。其中一个元素使用了 direction: rtl; 来支持阿拉伯文文本的正确显示。

利用浮动处理表格数据

在处理表格数据时，合理设置浮动属性可以提高表格的美观度和功能性。

示例十：利用浮动处理表格数据
HTML 结构
<!DOCTYPE html>
<html>
<head>
  <style>
    .item {
      float: left;
      width: 50%;
      margin: 10px;
      background-color: #f1f1f1;
    }

    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="clearfix">
    <div class="item">Data 1</div>
    <div class="item">Data 2</div>
    <div class="item">Data 3</div>
    <div class="item">Data 4</div>
  </div>
</body>
</html>
解析

在这个例子中，四个 .item 元素使用浮动和宽度设置来创建一个两列布局。这种方式可以模拟表格数据的效果，增加表格的美观度和功能性。

结束语

通过本文的学习，你已经掌握了CSS浮动的基础知识，以及如何在实际开发中应用这些技巧。CSS浮动是前端开发中不可或缺的一部分，它为开发者提供了强大的工具，帮助他们创建美观、灵活且易于维护的布局。希望这些内容能帮助你更好地理解和应用CSS浮动，提高你的前端开发技能。

以上就是关于前端CSS：CSS浮动的详细介绍及其示例。希望这些内容能帮助你更好地理解和掌握 CSS 浮动的应用。

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

专栏系列（点击解锁）学习路线(点击解锁）知识定位
《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。
通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》持续更新中~Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》持续更新中~SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》持续更新中~算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》持续更新中~基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
DTcode7
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
GUI-CSS:前端 CSS
08-05
此外，CSS还有许多高级特性，如浮动（float）、定位（positioning）、响应式设计（responsive design，如媒体查询media queries）、Flexbox和Grid布局系统等，这些都是创建现代图形用户界面所必需的工具。...
前端css学习入门资源
02-24
在前端开发领域，CSS（Cascading Style Sheets）是用于定义网页中元素样式的重要技术，对于任何想要涉足或提升前端技能的人来说，理解并熟练掌握CSS是必不可少的。本资源包包含了一系列HTML教程，旨在帮助初学者系统...
CSS：浮动
小谷同学的博客
05-29 1188
由于网页默认是一个二维平面，当我们在网页中一行行摆放标签时，块标签会独占一行，行标签则只占自身大小，这种情况下要实现网页布局就很麻烦了，所以我们就需要通过一些方法来改变这种默认的布局方式！CSS中的浮动属性可以让标签脱离原来的文档流，也就是二维平面，浮动后的标签默认是内容的大小，且可以为其设置宽和高。浮动后的标签不占用原来文档流的空间，下面的标签就会向上移动，会影响后面的网页布局。通过css的浮动属性，让4个<div>漂浮在一行，且浮动后的div标签默认是内容大小。大家一起学习,一起进步!
【web前端开发】CSS浮动
云泽野の编程日记
03-27 1086
这里的清除浮动并不是把浮动的代码给清除了,而是其它元素会受到浮动的影响,我们不想让其它元素受到浮动的影响,因此我们需要清除浮动。但是蓝色的div盒子并没有把灰色div盒子的内容遮盖掉,虽然是脱标,但算是一种半脱标.可以看到第二个跑到了第一个div的位置,就这就是浮动的脱标现象,相当于是飞起来了.蓝色的div已经脱标了.因此绿色的div就跑到上面去了.这就是受到了浮动的影响。如果我想要的是绿色的盒子就在蓝色的盒子下面这个位置显示。这是不加浮动的显示效果,下面看看加了浮动的。
前端CSS浮动布局
zhxzrd的博客
07-26 1475
CSS浮动布局，关键字float
CSS伪元素::after清除浮动样式
g841805的博客
04-11 402
【代码】CSS伪元素::after清除浮动样式。
前端学习：浮动
real_laugh的博客
02-28 2270
浮动用于改变标签默认的排列方式。float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或另一个浮动框的边缘。 语法： 选择器 { float: 属性值; } 属性值如下表： 属性值 描述 none 元素不浮动(默认值)。 left 元素向左浮动。 right 元素向右浮动。 例如： <!DOCTYPE html> <html lang="en"> ...
前端基础：CSS初始化
weixin_49555741的博客
03-30 1575
不同浏览器对标签的默认值是不同的，为了消除不同的浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。（css初始化是指重设浏览器的样式） 每个网页都必须首先进行CSS初始化 ...
前端开发：（三）CSS入门
qq_35763697的博客
02-07 1342
CSS
前端学习笔记：CSS中浮动的原理，定位
sinat_38393872的博客
05-08 1042
CSS中Float的原理，定位的原理（fixed，absolute，relative，static）
前端之CSS:浮动和定位,清除浮动
weixin_57246351的博客
02-25 313
转自以下链接 前端之CSS浮动和定位
前端基础入门之css 弹性盒 display:flex
热门推荐
LoveSummer
06-22 1万+
（弹性盒、伸缩盒）要使用弹性盒，必须先将一个元素设置为弹性容器我们通过 来设置弹性容器 弹性容器的子元素是弹性元素（弹性项）弹性元素可以同时是弹性容器主轴与侧轴 指定容器中弹性元素的排列方式 设置弹性元素是否在弹性容器中自动换行 简写属性 是和的简写属性 如何分配主轴上的空白空间（主轴上的元素如何排列） 元素沿着主轴起边排列 元素沿着主轴终边排列 元素居中排列 空白分布到元素两侧 空白均匀分布到元素间 空白分布到元素的单侧元素在辅轴上如何对齐 默认值，将元素的长度设置为相同的值 元素不会拉伸，沿着辅轴起
前端开发基础：HTML+CSS
04-06
### 前端开发基础：HTML+CSS #### 前言 前端开发是指通过HTML、CSS、JavaScript等技术创建用户界面的过程。本篇笔记主要介绍HTML与CSS的基础知识，帮助初学者快速入门。 #### HTML简介 - **定义**：HTML...
DIVCSS布局：CSS浮动float属性详解.doc
05-13
DIVCSS布局：CSS浮动float属性详解 在 Web 开发中，CSS 浮动float属性是布局中非常重要的属性之一。在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用 Web 标准构建网页以后，float 浮动...
web前端CSS题库.docx
07-02
- **清除浮动：** - 使用`clear`属性可以防止元素与其前面的浮动元素相邻。 - `clear: left`：不允许左侧有浮动元素。 - `clear: right`：不允许右侧有浮动元素。 - `clear: both`：左右两侧均不允许有浮动元素...
CSS3 视差滚动相册
懒羊羊大王的博客
08-22 555
一个基于 CSS3 的视差滚动相册，采用网格布局（主要）与弹性布局。
原神4.8版本抽到角色和重点培养数据表
lulei5153的博客
08-20 655
【代码】原神4.8版本抽到角色和重点培养数据表。
CSS3页面布局-三栏-中栏流动布局
业精于勤荒于嬉，行成于思毁于随
08-23 163
控制两个外包装容器的外边距，一个包围三栏，一个包围左栏和中栏。实现三栏布局且中栏内容区不固定的核心问题就是处理右栏的定位，并在中栏内容区大小改变时控制右栏与布局的关系。
基于ssm和vue的 校园短期闲置资源置换平台源码 校园短期闲置资源置换平台代码（高分毕设项目源码）
最新发布
08-23
1. 校园短期闲置资源置换平台代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是ssm，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DTcode7

客官，赏个铜板吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值