位置: IT常识 - 正文

CSS清除浮动的五种方法(超详细)(css中清除浮动)

编辑:rootadmin
CSS清除浮动的五种方法(超详细) 1.为什么要清除浮动?

推荐整理分享CSS清除浮动的五种方法(超详细)(css中清除浮动),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:清除浮动css写法,css中清除浮动的目的有哪些,清除浮动css写法,css清除浮动的几种方法,css中清除浮动,css清除浮动的几种方法,css中清除浮动,css清除浮动的几种方法,内容如对您有帮助,希望把文章链接给更多的朋友!

浮动的原理是让图片脱离文档流,直接浮在桌面上。我们一般布局的时候都是只设置宽度不设置高度,让内容来自动填充高度。但使用浮动后会让原本填充的高度消失,父元素高度为0,后续添加内容布局会产生混乱,造成高度塌陷,这时候就可以利用清除浮动来解决父元素高度塌陷的问题。

<style> *{ margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; background-color: pink; } .box2{ width: 80px; height: 80px; background-color: skyblue; } </style> <div class="box1">1</div> <div class="box2">2</div>

以上面的代码为例,默认状态下,它的展示效果是这样的:

现在给1号盒子添加一个左浮动float :left,我们来看看会发生什么:

 我们可以看到2号盒子在桌面上不见了,那么原因是什么呢,原因是1号盒子漂浮起来了,原本所占的空间空缺出来了,所以2号盒子到了1号盒子的下方,如图所示,

 那么下面是我们的解决方法:

2.解决方法一(clear)

直接给第二个盒子添加一个clear:left  这里需要注意,clear消除的是上一个盒子对自己的影响,所以,前面一个盒子往哪边浮动,我们就clear哪边,这里的上一个盒子是float:left,所以我们在第二个盒子上添加的也是clear:left

CSS清除浮动的五种方法(超详细)(css中清除浮动)

 3.解决方法二(overflow:hidden)

overflow这个属性需要添加在父元素上,所以我们给两个盒子添加一个父元素,为了看清楚高度塌陷,我们在添加一个底部盒子,如下:

<style> *{ margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; background-color: pink; } .box2{ width: 80px; height: 80px; background-color: skyblue; } .father{ width: 100%; border: 2px solid red; } .bottom{ width: 100%; height: 200px; background-color: green; } </style> <div class="father"> <div class="box1">1</div> <div class="box2">2</div> </div> <div class="bottom">3</div>

这是默认状态下的状况 

 现在给1号盒子和2号盒子添加浮动,我们来看看会发生什么

<style> .box1{ width: 100px; height: 100px; background-color: pink; float: left; } .box2{ width: 80px; height: 80px; background-color: skyblue; float: left; }</style>

可以看到我们的底部盒子不在原来的位置了,原因是什么呢,原因就是此时父元素我们并没有给他设置高度,父元素的高度完全是1号2号盒子撑起来的,现在给1号2号盒子添加了浮动,不占据原来的位置了,所以父元素此时的高度为零,不占位置了,底部盒子就会上去,造成高度塌陷.

解决方法就是:给父元素添加一个overflow:hidden

<style> .father{ width: 100%; border: 2px solid red; overflow: hidden; }</style>

 4.解决方法三(给父元素添加高度)

第三种方法就是给父元素添加一个高度,注意,父元素高度的设置一定要大于子元素中高度最高的盒子,以此例子来说就是,子元素中最高的盒子高度是100px,那么父元素的高度一定要大于等于100px

<style> .father{ width: 100%; height: 100px; border: 2px solid red; }</style>

 5.解决方法四(额外标签法)

在需要清除浮动的标签后面添加一个空标签,给其加上clear:both

<div class="father"> <div class="box1">1</div> <div class="box2">2</div> <div class="clear"></div> </div> <div class="bottom">3</div><script> .clear{ clear: both; }</script>

6.解决方法五(使用after伪元素清除浮动) 

这个方法也有一个缺点,就是不支持IE6,IE7

<style> .father:after{    content: "";    display: block;    height: 0;    clear:both;    visibility: hidden;}.father{    zoom: 1; /*IE6清除浮动的方式 只有IE6-IE7执行,其他浏览器不执行*/}</style>

本文链接地址:https://www.jiuchutong.com/zhishi/300089.html 转载请保留说明!

上一篇:微信多开教程及下载链接(微信多开使用方法)

下一篇:Tomcat安装使用与部署Web项目的三种方法(tomcat的安装配置)

  • 境内单位和个人向境外单位提供服务
  • 工业企业取得土地使用权专用发票可以抵扣吗?
  • 清算资产处置
  • 国有股权无偿划转协议
  • 个税所得税清缴
  • 记账凭证附单据是有哪些
  • 开具红字发票的当月就要进项税额转出吗
  • 企业的办税员承担责任吗
  • 资产负债表要素包括几项
  • 自行研发无形资产暂时性差异
  • 支付收购股权款如何做账
  • 汽车贷款利息是什么
  • 税款返点如何做财务处理呢?
  • 河道工程维护管理费征收
  • 外出参加会议费用怎么算
  • 材料短缺赔偿会计分录怎么写?
  • 员工考试报名费计入什么科目
  • 最新个人独资企业
  • 通用机打发票单位名称打不下怎么办
  • 关于汽车配件的书
  • 作进项税转出
  • 旅游业开票问题总结二
  • 公司个人所得税怎么申报
  • 企业咨询费可以抵扣吗
  • 医院职工福利费使用范围和标准是多少
  • 申报个税按计提工资还是实际发放
  • 哪些企业所得税汇算清缴
  • 税务机关退税
  • 鸿蒙3.0平板适配名单
  • 收到拆迁补偿款现金流量表在哪里体现
  • 物业公司收取水电周转金后果
  • 分摊本月领用材料的成本差异
  • 收到服务费的发票怎么做
  • 核定征收怎么申报个人经营所得
  • picfile什么意思
  • 增值税进项如何取得更多
  • 税收包含哪些税种
  • win7旗舰版叫啥
  • PHP:mcrypt_cfb()的用法_Mcrypt函数
  • 化妆品与药品
  • html和css介绍
  • 金税盘,税控盘Ukey价格
  • php流程图
  • winform 文件上传
  • 发票取得取得售卡方公司开具的增值税专用发票
  • 我国营改增后,一般纳税人适用的增值税基本税率
  • 自然人所属税务机关怎么选
  • 营业外收支的账户是什么
  • 织梦如何开启会员功能
  • python分布式执行框架Ray的介绍
  • sql server 2008设置角色
  • 个体户可以开多少免税发票
  • 企业购置房产进项税税率
  • 转让不动产为什么不能开全票发票
  • 建筑企业预缴所得税税率是多少
  • 登记会计账簿的基本要求
  • 有什么科目需要考试吗英语翻译
  • 国内佣金如何入账
  • 电子承兑汇票接收不了怎么办
  • 投资款计入哪个科目
  • 农村会计记账实例
  • sql中的非逻辑
  • mysql修改默认端口方法
  • mysql密码忘了怎么办?
  • windows xp系
  • 虚拟系统win10
  • 远程登陆服务器命令
  • Ubuntu系统怎么设置root
  • 苹果Mac系统怎么切换输入法
  • u盘安装win10ghost
  • linux修改分组
  • Win10双显卡怎么切换到独立显卡
  • win10激活界面打不开
  • 在vs中搭建opengl环境
  • opengl立体模型
  • 税控盘登录密码忘了怎么办怎么重置
  • 中国税务徽标
  • 增值税已申报但是忘清卡
  • 国家电子税务总局重庆电子税务局
  • 无纸化同义词
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设