css通用小笔记02??浮动、清除（三个例子）_html/css_WEB-ITnose
css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）
一.文字环绕效果：
html代码如下：
1 <body> 2 3 <style type="text/css"> 4 #big img {float: left;padding: 10px;border: 1px solid red;} 5 #big span {font-size: 24px;font-weight: bold; margin: 0 auto;} 6 </style> 7 <div id="big"> 8 <span>广告浮动效果:</span> 9 <p><img src="/static/imghw/default1.png" data-src="..\Desktop\p6.jpg" class="lazy" style="max-width:90%" alt="p6" />文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>10 </div>11 12 </body>解释：把img标签 直接左浮动，就会出现文字包围图片的效果，而padding: 10px;的作用是设置图片与文字的距离，运行效果如下（记得自己修改图片路径）：
二.多个div并排显示
html代码如下：
1 <body> 2 3 <style type="text/css"> 4 #big div {width: 100px;height: 100px;} 5 .div1 {background: red;} 6 .div2 {background: yellow;} 7 .div3 {background: green;} 8 </style> 9 <div id="big">10 <div class="div1">div1</div>11 <div class="div2">div2</div>12 <div class="div3">div3</div>13 </div>14 15 </body>上面的代码显示效果如下：
由图看出三个div并没有并排显示，而是竖着显示的，这就是默认的显示方法。而如果想要并排显示的话，只需要在上上面的代码中加一句话，
#big div {width: 100px;height: 100px;float：left;}然后显示效果如下：
三.清除浮动
有下面的这段html代码：
1 <body> 2 3 <style type="text/css"> 4 #big div {width: 100px;height: 100px;} 5 .div1 {background: red;float: left;}//注意这里的第一个div是左浮动； 6 .div2 {background: yellow;} 7 .div3 {background: green;} 8 </style> 9 <div id="big">10 <div class="div1">div1</div>11 <div class="div2">div2</div>12 <div class="div3">div3</div>13 </div>14 15 </body>从第二个例子可以得知，如果div2和div3都设置了float：left；三个div就会并排显示。注意上面的代码，第一个div是左浮动，而后面两个却没有设置浮动，运行效果怎么样呢？如下图：
由图可以看出，div2不见了，这是为什么呢？因为div1设置为左浮动，所以div2会默认为从第一个显示，所以div1就覆盖了div2，div3从div2处继续显示，所以造成了这样一个结果，那么该怎么去还原默认显示呢？这就要用到清除浮动，修改代码 .div2 {background: yellow;clear：left;}就ok了。效果如下：
div2又出现了，这就是清除浮动的作用，clear属性有三种值：left、right、both；顾名思义，就知道什么意思了，我不多说了。
三个例子就到这儿吧，希望对大家有帮助。有问题欢迎讨论。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何下载适用于通用 PnP 监视器的驱动程序：5 种方法
Apr 21, 2023 pm 08:55 PM
如果您最近升级到Windows10或Windows11，您可能需要在您的PC上下载通用PnP显示器驱动程序。因此，我们想出了一个教程，它将告诉您更多关于通用PnP监视器和一些在Windows上下载和安装通用PnP驱动程序的快速方法。您可能需要下载大多数显示器品牌的驱动程序，包括AcerGenericPnP显示器驱动程序。在设备管理器或显示适配器属性的监视器选项卡下查找监视器类型时，您可能会注意到通用PnP监视器。有机会在笔记本电脑和台式机的双显示器设置中找到它。下
如何在 Windows 11 中清除桌面背景最近的图像历史记录
Apr 14, 2023 pm 01:37 PM
Windows 11 改进了系统中的个性化功能，这使用户可以查看之前所做的桌面背景更改的近期历史记录。当您进入windows系统设置应用程序中的个性化部分时，您可以看到各种选项，更改背景壁纸也是其中之一。但是现在可以看到您系统上设置的背景壁纸的最新历史。如果您不喜欢看到此内容并想清除或删除此最近的历史记录，请继续阅读这篇文章，它将帮助您详细了解如何使用注册表编辑器进行操作。如何使用注册表编辑
小红书笔记怎么删除
Mar 21, 2024 pm 08:12 PM
小红书笔记怎么删除?在小红书APP中是可以编辑笔记的，多数的用户不知道小红书笔记如何的删除，接下来就是小编为用户带来的小红书笔记删除方法图文教程，感兴趣的用户快来一起看看吧！小红书使用教程小红书笔记怎么删除1、首先打开小红书APP进入到主页面，选择右下角【我】进入到专区;2、之后在我的专区，点击下图所示的笔记页面，选择要删除的笔记;3、进入到笔记页面，右上角【三个点】;4、最后下方会展开功能栏，点击【删除】即可完成。
小红书删除的笔记能恢复吗
Oct 31, 2023 pm 05:36 PM
小红书删除的笔记不能恢复。小红书作为一款知识分享和购物平台，为用户提供了记录笔记和收藏有用信息的功能。根据小红书的官方说明，已经删除的笔记是无法恢复的。小红书平台并没有提供专门的笔记恢复功能。这意味着，一旦在小红书中删除了笔记，无论是不小心误删还是其他原因，一般情况下是无法从平台上找回被删除的内容的。如果遇到特殊情况，可以尝试联系小红书的客服团队，看是否能够协助解决问题。
如何在 Windows 11 中清除保护历史记录：2种方法
Apr 23, 2023 am 08:04 AM
当您的PC存储空间不足时，您可以立即查看许多文件夹以释放空间。其中一个消耗很大一部分的是WindowsDefender保护历史记录，但你可以在Windows11中清除它吗？尽管并非完全必要，但删除保护历史记录实际上有助于清除系统上的一些存储空间。对于某些用户来说，这些文件占用了20-25GB的空间，如果您的计算机存储空间不足，这可能会令人生畏。那么，让我们找出什么是保护历史记录，在Windows11中清除它的所有方式，以及如何将其配置为在设置的时间后自动清除。什么是保护历史？M
小红书发布过的笔记不见了怎么办？它刚发的笔记搜不到的原因是什么？
Mar 21, 2024 pm 09:30 PM
作为一名小红书的用户，我们都曾遇到过发布过的笔记突然不见了的情况，这无疑让人感到困惑和担忧。在这种情况下，我们该怎么办呢？本文将围绕“小红书发布过的笔记不见了怎么办”这一主题，为你详细解答。一、小红书发布过的笔记不见了怎么办？首先，不要惊慌。如果你发现笔记不见了，保持冷静是关键，不要慌张。这可能是由于平台系统故障或操作失误引起的。检查发布记录很简单。只需打开小红书App，点击“我”→“发布”→“所有发布”，就可以查看自己的发布记录。在这里，你可以轻松找到之前发布的笔记。3.重新发布。如果找到了之
如何在最新的iOS 17系统中连接iPhone上的Apple Notes
Sep 22, 2023 pm 05:01 PM
使用添加链接功能在iPhone上链接AppleNotes。笔记：如果您已安装iOS17，则只能在iPhone上的AppleNotes之间创建链接。在iPhone上打开“备忘录”应用。现在，打开要在其中添加链接的注释。您还可以选择创建新备忘录。点击屏幕上的任意位置。这将向您显示一个菜单。点击右侧的箭头以查看“添加链接”选项。点击它。现在，您可以键入注释的名称或网页URL。然后，点击右上角的完成，添加的链接将出现在笔记中。如果要添加指向某个单词的链接，只需双击该单词即可将其选中，选择“添加链接”并按
小红书怎么在笔记中添加商品链接 小红书在笔记中添加商品链接教程
Mar 12, 2024 am 10:40 AM
小红书怎么在笔记中添加商品链接?在小红书这款app中用户不仅可以浏览各种内容还可以进行购物，所以这款app中关于购物推荐、好物分享的内容是非常多的，如果小伙伴在这款app也是一个达人的话，也可以分享一些购物经验，找到商家进行合作，在笔记中添加连接之类的，很多人都愿意使用这款app购物，因为不仅方便，而且有很多达人会进行一些推荐，可以一边浏览有趣内容，一边看看有没有适合自己的衣服商品。一起看看如何在笔记中添加商品链接吧!小红书笔记添加商品链接方法 在手机桌面上打开app。 在app首页点击
