4.6 浮动定位方式float_c语言中float的左右浮动属性示例-程序员宅基地

技术标签： # HTML基础  css  html5  # web前端设计与开发  # CSS  html  

4.6 浮动定位方式float
使用float属性来进行浮动定位；使用clear属性可以清除这种浮动

1.float属性（设定浮动）

  1. float属性的三个取值
    （1）left左浮动
    （2）right右浮动
    （3）none不浮动
    下面是一个向左浮动的例子
    在这里插入图片描述
    在这里插入图片描述
  2. float属性的两个用处
    （1）在图文混排的时候，如果你希望图片位于文字的左侧或者右侧，那就把图片对的float属性设为left或者right；
    （2）在做多列盒子布局的情况，可以根据需求让盒子向左或向右浮动。
    float属性的特点
  3. 三个盒子，默认情况向下不浮动，体现了block类型元素的特点，每个独占一行
    在这里插入图片描述
    （1）box1向右浮动的情况，box1向右浮动，他就脱离了文档流，所以它原来的位置就会被box2占据，box3也向上移动；
    在这里插入图片描述
    （2）三个盒子都向左浮动
    宽度也够的情况，div标签形成的三个盒子就可以水平排列；
    在这里插入图片描述
    当宽度不够的情况，box3会下降到第二行排列
    在这里插入图片描述
    要特别注意下面的排列方式
    在这里插入图片描述
    2.clear属性（清除浮动）
  4. clear属性的取值
    （1）both：清除当前元素两侧的浮动
    （2）left或right：只能清除一侧，清除的意思不是清除浮动，而是这个元素的左侧或右侧没有浮动元素。
  5. 清除浮动的应用：
    （1）当我们把两个盒子都设为向右浮动时，就会出现下面的效果
    在这里插入图片描述
    但是当我们想要下面的效果的时候，就要用clear属性，设置它的值为right，那么它的右侧就没有浮动元素了，它自然就到了下面了。注意，设置的是左侧的盒子的clear属性，因为它的右侧有浮动元素。
    在这里插入图片描述
    （2）当前的区域分为左右两栏，左侧的main比较高，右侧的sidebar比较低，第三栏的footer不管是否浮动，它都会排列占据这个浮动元素的一个空位。但是我们并并不是想让footer为那个位置，而是想让他位于main的下方显示，这就要用到clear属性；
    在这里插入图片描述
    当把footer的clear属性设置为both，footer的两侧就不允许出现向左浮动或者向右浮动的元素，footer就会单独占一行。
    在这里插入图片描述

习题

在这里插入图片描述
在这里插入图片描述
？
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjj8008120308/article/details/119943098

智能推荐

物联网开发技术栈_物联网技术java技术栈-程序员宅基地

文章浏览阅读2.2k次，点赞2次，收藏10次。物联网开发技术栈 内容简介作为互联网技术的进化，物联网开发并非孤立的技术栈，而是向上承接了互联网，向下统领了嵌入式硬件开发的一个承上启下的全栈开发技术。虽然我们并不能预测物联网技术栈最终的样子：统一的开发语言是 JavaScript 还是 Python 亦或者其他编程语言；HTTP、WebSockets、MQTT、CoAP 等协议谁会是最后的赢家，并且随着物联网的不断进化，甚至我们..._物联网技术java技术栈

《Git学习笔记：Git入门 & 常用命令》-程序员宅基地

文章浏览阅读674次，点赞10次，收藏11次。Git是一个分布式版本控制工具，通常用来对软件开发过程中的源代码文件进行管理，通过Git仓库来存储和管理这些文件，Git仓库分为两种：指的是存储在各个开发人员自己本机电脑上的Git仓库指的是远程服务器上的Git仓库commit：提交，将本地文件和版本信息保存到本地仓库push：推送（上传），将本地仓库文件和版本信息上传到远程仓库pull：拉取（下载），将远程仓库文件和版本信息下载到本地仓库。

CPU热点分析——pprof (gperftools)使用_gperftools pprof-程序员宅基地

文章浏览阅读4.6k次。pprof (gperftools)使用谷歌的工具集，可查看CPU采样结果。pprof (google-perftool)，用于来分析程序，必须保证程序能正常退出。使用步骤：1.准备工具，先安装工具包libunwind-1.1.tar.gzgperftools-2.1.tar.gz解压后 configure到系统默认路径即可，之后直接-lprofiler 2.再安装图形工具sudo yum ins..._gperftools pprof

JavaScript BOM-程序员宅基地

文章浏览阅读118次。JavaScript BOM：Navigator、History、Location

MongoDB数据库 —— 图形化工具_mongodb数据库图形化工具-程序员宅基地

文章浏览阅读6.2k次，点赞16次，收藏66次。在前面通过使用MongoDB在命令窗口操作数据库，而MySQL数据库也同样可以在命令窗口使用sql语句操作数据库，在安装数据库的时候提到可以安装这个图形化工具的，为了节省安装时间和卡顿选择后续安装MongoDB图形化工具，在MySQL数据中同样也有这个MySQL workbench 图形化工具可以选择进行安装；那么本篇就来安装MongoDB的图形化工具 — MongoDBCompass。_mongodb数据库图形化工具

ChatGPT带给智慧城市的启示——未来城市演进路径的探讨-程序员宅基地

文章浏览阅读1.4k次，点赞13次，收藏10次。未来城市的大模型包括城市总体规划、城市交通运输管理、城市公共安全和应急管理、经济发展和产业园区发展、社区发展、资源承载调控、污染调控、社会资源优化调控、基础设施调控、人口研究等模型。其对城市要素、关键指标、函数、流程、模型、平台、技术、资金、人才、市场、自然环境等内外部因素进行仿真建模。采用物联网、云计算、大数据、数字孪生和人工智能等技术来获取地、物、人、组织、环境、社会、经济、业务逻辑和运营规律等相关数据。、物联网、大数据、云计算、数字孪生、元宇宙、可穿戴生理传感器、分布式新能源等各类新技术。

随便推点

从零开始开发Shopify主题：（4）调用自定义配置_shopify自定义主题-程序员宅基地

文章浏览阅读3.6k次。在上一篇文章中，我们知道了如何使用配置文件自定义主题，以允许商店所有者自己更改Shopify主题。 如上所述，这些设置会在用户单击管理面板的在线商店>主题部分中的自定义主题按钮时显示，并在主题开发文件的config / settings_schema.json文件中定义。在这篇文章中，我们将了解如何访问这些设置并在开发主题时调用它们。调用配置要调用模板中的配置信息，需要使用li..._shopify自定义主题

git本地分支与远程分支关联及遇到的问题解决方案_本地分支 '(no branch)' (远程分支 = '(no branch)') 是无效的。引用名-程序员宅基地

文章浏览阅读2.6k次。1.查看本地分支git branch绿色表示当前分支#######################################################2.查看远程分支git branch -a#######################################################3.切换分支git checkout branch_name..._本地分支 '(no branch)' (远程分支 = '(no branch)') 是无效的。引用名称必须遵循

java连接mysql出现The server time zone value '�й���׼ʱ��' is unrecognized的解决方法_java.lang.runtimeexception: the server time zone v-程序员宅基地

文章浏览阅读2.2w次，点赞18次，收藏28次。java连接mysql出现The server time zone value '�й���׼ʱ��' is unrecognized的解决方法在Idea中连接数据库是抛出The server time zone value ‘�й���׼ʱ��’ is unrecogni错误 原因是因为使用了Mysql Connector/J 6.x以上的版本，然后就报了时区的错误。解决办法在配置url中添..._java.lang.runtimeexception: the server time zone value '嚙請對蕭嚙踝蕭

鸿蒙原生应用元服务实战-Serverless华为账户认证登录需尽快适配-程序员宅基地

文章浏览阅读671次，点赞11次，收藏9次。并且在这个固定的serverless服务中去增加这个，应该不是应用元服务开发者有这个加入权限的，应该是要统一解决，类似实现和手机注册验证一样的，直接可以使用或者少量代码配置即可使用。另外就是如果是新的元服务应用，使用的serverless，如果不支持华为账户功能，就没法上架，这个也是比较麻烦的，前面已经使用serverless开发基本完成或者已经完成的，得用其他方式去实现才行吧。对于已经上架的应用和元服务、升级也没法进行。3月1日的时间是快到了。

使用XAMPP可视化管理Mysql，使用JDBC访问数据库执行插入、查询、删除等操作_xammp进入可视化界面-程序员宅基地

文章浏览阅读5.7k次，点赞2次，收藏8次。准备工作：安装XAMPP,登陆apache,mysql，并通过phpadmin来创建数据库，新建一个表，插入一些数据：http://localhost/phpmyadmin，最好设置密码，不然后面连接数据库的时候可能会无法访问设置密码方式：修改密码--->一定要使用生成的密码来登陆，包括后面的数据库url也是。我简历的数据如下：这时候就可以在eclipse中编程开发_xammp进入可视化界面

（转） spring 的jar各包作用-程序员宅基地

文章浏览阅读119次。转自：http://blog.csdn.net/cailiang517502214/article/details/4797642spring.jar是包含有完整发布的单个jar包，spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容，因为只有在开发环境下才会用到spring-mock.jar来进行辅助测试，正式应用系统中是用不得这些类的。...

推荐文章

热门文章

相关标签