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

智能推荐

python简易爬虫v1.0-程序员宅基地

文章浏览阅读1.8k次，点赞4次，收藏6次。python简易爬虫v1.0作者：William Ma (the_CoderWM)进阶python的首秀，大部分童鞋肯定是做个简单的爬虫吧，众所周知，爬虫需要各种各样的第三方库，例如scrapy, bs4, requests, urllib3等等。此处，我们先从最简单的爬虫开始。首先，我们需要安装两个第三方库：requests和bs4。在cmd中输入以下代码：pip install requestspip install bs4等安装成功后，就可以进入pycharm来写爬虫了。爬

安装flask后vim出现：error detected while processing /home/zww/.vim/ftplugin/python/pyflakes.vim:line 28_freetorn.vim-程序员宅基地

文章浏览阅读2.6k次。解决方法：解决方法可以去github重新下载一个pyflakes.vim。执行如下命令git clone --recursive git://github.com/kevinw/pyflakes-vim.git然后进入git克降目录，./pyflakes-vim/ftplugin,通过如下命令将python目录下的所有文件复制到~/.vim/ftplugin目录下即可。cp -R ...._freetorn.vim

HIT CSAPP大作业：程序人生—Hello‘s P2P-程序员宅基地

文章浏览阅读210次，点赞7次，收藏3次。本文简述了hello.c源程序的预处理、编译、汇编、链接和运行的主要过程，以及hello程序的进程管理、存储管理与I/O管理，通过hello.c这一程序周期的描述，对程序的编译、加载、运行有了初步的了解。_hit csapp

18个顶级人工智能平台-程序员宅基地

文章浏览阅读1w次，点赞2次，收藏27次。来源：机器人小妹　　很多时候企业拥有重复，乏味且困难的工作流程，这些流程往往会减慢生产速度并增加运营成本。为了降低生产成本，企业别无选择，只能自动化某些功能以降低生产成本。　　通过数字化..._人工智能平台

electron热加载_electron-reloader-程序员宅基地

文章浏览阅读2.2k次。热加载能够在每次保存修改的代码后自动刷新 electron 应用界面，而不必每次去手动操作重新运行，这极大的提升了开发效率。安装 electron 热加载插件热加载虽然很方便，但是不是每个 electron 项目必须的，所以想要舒服的开发 electron 就只能给 electron 项目单独的安装热加载插件[electron-reloader]:// 在项目的根目录下安装 electron-reloader，国内建议使用 cnpm 代替 npmnpm install electron-relo._electron-reloader

android 11.0 去掉recovery模式UI页面的选项_android recovery 删除 部分菜单-程序员宅基地

文章浏览阅读942次。在11.0 进行定制化开发，会根据需要去掉recovery模式的一些选项 就是在device.cpp去掉一些选项就可以了。_android recovery 删除 部分菜单

随便推点

echart省会流向图（物流运输、地图）_java+echart地图+物流跟踪-程序员宅基地

文章浏览阅读2.2k次，点赞2次，收藏6次。继续上次的echart博客，由于省会流向图是从echart画廊中直接取来的。所以直接上代码<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&_java+echart地图+物流跟踪

Ceph源码解析：读写流程_ceph 发送数据到其他副本的源码-程序员宅基地

文章浏览阅读1.4k次。一、OSD模块简介1.1 消息封装：在OSD上发送和接收信息。cluster_messenger -与其它OSDs和monitors沟通client_messenger －与客户端沟通1.2 消息调度：Dispatcher类，主要负责消息分类1.3 工作队列：1.3.1 OpWQ: 处理ops（从客户端）和sub ops（从其他的OSD）。运行在op_tp线程池。1...._ceph 发送数据到其他副本的源码

进程调度（一）——FIFO算法_进程调度fifo算法代码-程序员宅基地

文章浏览阅读7.9k次，点赞3次，收藏22次。一 定义这是最早出现的置换算法。该算法总是淘汰最先进入内存的页面，即选择在内存中驻留时间最久的页面予以淘汰。该算法实现简单，只需把一个进程已调入内存的页面，按先后次序链接成一个队列，并设置一个指针，称为替换指针，使它总是指向最老的页面。但该算法与进程实际运行的规律不相适应，因为在进程中，有些页面经常被访问，比如，含有全局变量、常用函数、例程等的页面，FIFO 算法并不能保证这些页面不被淘汰。这里，我_进程调度fifo算法代码

mysql rownum写法_mysql应用之类似oracle rownum写法-程序员宅基地

文章浏览阅读133次。rownum是oracle才有的写法，rownum在oracle中可以用于取第一条数据，或者批量写数据时限定批量写的数量等mysql取第一条数据写法SELECT * FROM t order by id LIMIT 1;oracle取第一条数据写法SELECT * FROM t where rownum =1 order by id;ok，上面是mysql和oracle取第一条数据的写法对比，不过..._mysql 替换@rownum的写法

eclipse安装教程_ecjelm-程序员宅基地

文章浏览阅读790次，点赞3次，收藏4次。官网下载下载链接：http://www.eclipse.org/downloads/点击Download下载完成后双击运行我选择第2个，看自己需要（我选择企业级应用，如果只是单纯学习java选第一个就行）进入下一步后选择jre和安装路径修改jvm/jre的时候也可以选择本地的（点后面的文件夹进去），但是我们没有11版本的，所以还是用他的吧选择接受安装中安装过程中如果有其他界面弹出就点accept就行..._ecjelm

Linux常用网络命令_ifconfig 删除vlan-程序员宅基地

文章浏览阅读245次。原文链接：https://linux.cn/article-7801-1.htmlifconfigping &lt;IP地址&gt;:发送ICMP echo消息到某个主机traceroute &lt;IP地址&gt;：用于跟踪IP包的路由路由：netstat -r: 打印路由表route add ：添加静态路由路径routed：控制动态路由的BSD守护程序。运行RIP路由协议gat..._ifconfig 删除vlan

推荐文章

热门文章

相关标签