首页 > 其他分享 >清除浮动带来的影响

清除浮动带来的影响

时间:2023-10-02 09:45:12浏览次数:36  
标签:浮动 pox color 清除 float height 带来 background 200px

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         *{             margin: 0;             padding: 0;         }         #parent{             width: 600px;             /* height: 600px; */             background-color: red;             margin: 0 auto;             /* overflow: hidden; */         }         #box,         #pox{             width: 200px;             height: 200px;         }         #box{             background-color: green;             float: left;         }         #pox{             background-color: blue;             float: right;         }         .miss{             height: 200px;             background-color: black;         }
​        /* 相当于overfloat:hidden */ ​        .clear{ ​            height: 0; ​            opacity: 0;/*设置透明度*/ ​            line-height: 0; ​            display: block; ​            clear: both; ​        } ​    </style> </head> <body> ​    <!-- ​        清除浮动带来的影响: ​            clear:left (清除左浮动带来的影响) ​                  right(清除有浮动带来的影响) ​                  both(清除两边浮动带来的影响) ​     -->      <div id="parent">         <div id="box"></div>         <div id="pox"></div>         <!-- 需要另外添加一个盒子写样式,clear:both   了解即可 -->         <!-- <div style="clear: both;"></div> -->         <div class="clear"></div>      </div>      <div class="miss">我是miss这个盒子啊</div> </body> </html>

标签:浮动,pox,color,清除,float,height,带来,background,200px
From: https://www.cnblogs.com/xiaokang-zhu-666/p/17739721.html

相关文章

  • CSS浮动以及背景属性
    CSS浮动以及背景属性标准文档流在标准情况下文档的流向方式,块级元素默认从上到下,行内元素和行内块元素从左到右。CSS浮动,浮动的本意是为了解决文字环绕问题,设置浮动后。会对后面的文字产生环绕效果。浮动的基本使用:<style>*{float:left/*左浮动*/......
  • mac M2 清除系统数据
    磁盘至于265G打开一看系统数据是105G删除多余的数据设置->通用->存贮清除缓存sudorm-rf~/Library/Caches/*......
  • Linux 6.5+ 带来了一些针对 AMD Ryzen Z1 Extreme 的性能/改进
    导读最近发布的 Linux 6.5内核默认启用了AMDP-StateEPP,用于现代Ryzen系统,而不再使用通用的ACPICPUFreq驱动程序。在各种工作负载下运行Linux6.5(或更新版本)可以提高性能和/或能效。对于移动端的影响,我最近在Linux6.3、6.4、6.5和6.6Git内核上对ASUSROGA......
  • JS 设置定时器与清除定时器
    在前端,一些功能的实现需要用到定时器:轮询、定时开关弹窗、秒表、定时跳转等。。一、设置定时器window提供两个方法实现:setTimeout、setIntervalsetInterval():使一段代码每过一段时间就执行一次,比如轮询setInterval(()=>{console.log('setInterval定时器')},1000)s......
  • 记一次仿真挖矿的"彻底"清除
    发现首先find/-mmin2查看一下两分钟的运行进程我们发现backkthreads都有问题我们依次来看查看back文件如下发现循环写入的文件我们要找维持文件我们接着找维持文件查看kthreads文件成功发现维持文件打开crontab发现了计划文件我们再运行netstat-antp找一下......
  • 记一次仿真挖矿的"彻底"清除
    发现首先find/-mmin2查看一下两分钟的运行进程我们发现backkthreads都有问题我们依次来看查看back文件如下发现循环写入的文件我们要找维持文件我们接着找维持文件查看kthreads文件成功发现维持文件打开crontab发现了计划文件我们再运行netstat-antp找一下......
  • 数字孪生技术:为体育馆赛事带来全新体验
    体育赛事一直以来都是吸引人们热情和关注的焦点。而随着科技的飞速发展,数字孪生技术正在为体育馆和赛事管理带来革命性的变化。山海鲸可视化结合自研渲染引擎和三维建模技术打造数字孪生体育场馆赛事管理解决方案,它不仅提供了更好的观众体验,还提高了运营效率和安全性,本文带大家深......
  • 高技术产业的兴起为佛山带来了创新动力
    2022年的数据显示,佛山市的产业结构正呈现出明显的发展趋势。根据广郡通数据平台提供的数据,佛山市的第一产业达到了221.13亿元,占比1.7%;第二产业为7129.8亿元,占比56.2%;第三产业为5347.46亿元,占比42.1%。第一产业占比较低,但仍然具有其独特价值。农业、林业、牧业和渔业为城市提供了......
  • 17 display 和 浮动
    display可以使得行内元素和块元素相互转换,但不常用,用float!<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>/*inline:block:i......
  • Flutter为桌面应用程序开发带来了新的希望
    桌面应用开发的现状在过去,桌面应用程序的开发通常需要使用特定于操作系统的工具和语言,如C++、C#、Java等。这导致了高昂的开发成本和维护困难。尽管有一些跨平台桌面开发工具,如Electron和Qt,但它们在性能、用户体验和开发效率方面存在一些限制。Flutter的出现改变了这一格局,为桌面应......