位置: 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的安装配置)

  • 抖音点赞怎么删除(抖音点赞怎么删除推荐给好友)

    抖音点赞怎么删除(抖音点赞怎么删除推荐给好友)

  • 蓝牙耳机进水了怎么办而且也开不了机(蓝牙耳机进水了充不进去电怎么办)

    蓝牙耳机进水了怎么办而且也开不了机(蓝牙耳机进水了充不进去电怎么办)

  • 拼多多怎样退货给商家(拼多多怎样退货上门取件)

    拼多多怎样退货给商家(拼多多怎样退货上门取件)

  • 闲鱼的私信功能在哪里(闲鱼网如何私信)

    闲鱼的私信功能在哪里(闲鱼网如何私信)

  • ftp一直弹出用户名密码(ftp一直弹出用户名怎么办)

    ftp一直弹出用户名密码(ftp一直弹出用户名怎么办)

  • iphone no是什么手机(iphone no.什么意思)

    iphone no是什么手机(iphone no.什么意思)

  • 苹果x摔了一下屏幕出现黑色一块(苹果X摔了一下会不会有影响)

    苹果x摔了一下屏幕出现黑色一块(苹果X摔了一下会不会有影响)

  • 抖音知道谁看自己了吗(抖音知道谁看了自己的视频吗?)

    抖音知道谁看自己了吗(抖音知道谁看了自己的视频吗?)

  • 能看电视的软件有哪些(不用网络就能看电视的软件)

    能看电视的软件有哪些(不用网络就能看电视的软件)

  • qq大会员包括豪华黄钻吗

    qq大会员包括豪华黄钻吗

  • xr和11的膜一样吗(苹果xr的膜和苹果11的膜一样吗)

    xr和11的膜一样吗(苹果xr的膜和苹果11的膜一样吗)

  • oppo一直出现语音(oppo一直出现语音怎么关)

    oppo一直出现语音(oppo一直出现语音怎么关)

  • 微信找人怎么找(怎么找微信群聊)

    微信找人怎么找(怎么找微信群聊)

  • 华为荣耀9x微信视频怎么美颜(华为荣耀9X微信分身在哪里)

    华为荣耀9x微信视频怎么美颜(华为荣耀9X微信分身在哪里)

  • 手机sos功能是什么意思(手机里的sos是干嘛的)

    手机sos功能是什么意思(手机里的sos是干嘛的)

  • 苹果6很慢很卡怎么办(苹果6很慢很卡怎么回事)

    苹果6很慢很卡怎么办(苹果6很慢很卡怎么回事)

  • 苹果7p充电越充越少怎么回事(苹果7p手机充电越充越少是怎么回事)

    苹果7p充电越充越少怎么回事(苹果7p手机充电越充越少是怎么回事)

  • 怎么发在线文档(怎么发在线文档到微信群里)

    怎么发在线文档(怎么发在线文档到微信群里)

  • 苹果11广角怎么拍摄(苹果手机如何开广角)

    苹果11广角怎么拍摄(苹果手机如何开广角)

  • ods系统是什么意思(od os ds)

    ods系统是什么意思(od os ds)

  • iphone11怎么查激活时间(苹果11怎么查看激活)

    iphone11怎么查激活时间(苹果11怎么查看激活)

  • iphone11max啥时候上市(2021年苹果11promax什么时候降价)

    iphone11max啥时候上市(2021年苹果11promax什么时候降价)

  • iphonexr是什么基带(iphonexr是用的什么基带)

    iphonexr是什么基带(iphonexr是用的什么基带)

  • 昵图网如何让作品卖币(昵图网怎么设计图片呀)

    昵图网如何让作品卖币(昵图网怎么设计图片呀)

  • 埃尔姆利国家自然保护区里的一只文须雀,英格兰肯特郡 (© Mark Bridger/Offset by Shutterstock)(埃姆雷莫尔)

    埃尔姆利国家自然保护区里的一只文须雀,英格兰肯特郡 (© Mark Bridger/Offset by Shutterstock)(埃姆雷莫尔)

  • 小微企业要做企业年金吗
  • 2023年增值税税率表
  • 计提个人所得税计入什么科目
  • 个税申报状态失败,如何更正申报
  • 收到借款利息如何计算
  • 救援车拉货交警查吗?
  • 通过应交税费核算的
  • 合同履约成本合同结算如何处理抵消
  • 出口企业收入分录
  • 分公司注销所得税
  • 公司成本票不够交税多少
  • 申报文化事业建设费
  • 手写发票税率
  • 加速折旧税收优惠
  • 管理不善存货损失 企业所得税
  • 申报表利润总额与财务报表利润总额
  • 去年多确认收入今年怎么调整
  • 工资薪金支出账载金额小于实际发生额
  • 应交税费已交税金借方有余额
  • 用人单位发放工资时跨行手续费应由谁支付
  • 借条的标准格式 手写学生
  • 税务部门罚没收入计入什么科目
  • 微信小程序开发一个多少钱
  • vue-router
  • 小企业会计制度最新版
  • 财行〔2019〕11号代扣代缴手续费的解读
  • php使用( )关键字来创建对象
  • 小规模企业做账表格
  • linux如何使用
  • 投资性房地产在资产负债表中的列示
  • 去年的所得税计提多了怎么做分录
  • ps怎么把多余的p掉
  • 简单易学的前端框架
  • 律师费开票税费谁承担
  • 资产减值损失为什么要调增
  • 合同发票收款付款管理系统源码
  • 先款还是先票
  • 事业单位应当按月对固定资产计提折旧
  • 个人完税证明有什么用途
  • 长期待摊费用如何做分录
  • 其他应付款包括应付股利和应付利息吗
  • 百旺税控盘会自动清卡吗
  • access不能打开数据库
  • 补发以前年度工资怎么做账
  • 小企业会计准则跨年红冲
  • 撤回或减少投资所得税处理
  • 园林绿化企业属于什么行业
  • 长期股权投资亏损冲减顺序
  • 外贸企业出口货物的计税依据
  • 其他权益工具投资公允价值变动计入什么科目
  • 销售收入确认后怎么处理
  • 外账进销存单据是怎么弄的?
  • Windows 8.1下MySQL5.7 忘记root 密码的解决方法
  • 关机并重启是怎么回事
  • Winxp系统打不开浏览器
  • 电脑更新windows11后开机一黑屏
  • 电脑显示windowsxp不能进入桌面
  • win8系统打不开exe
  • win7可以免费升win10
  • os x10.10.3beta5官网下载 yosemite10.10.3beta5下载地址
  • 基于javascript的毕业设计
  • Android开发如何找到TextView指定文本
  • python的步骤
  • js中使用组件
  • 批处理计数
  • 单例类python
  • 查看接入安卓终端密码
  • python元祖内置函数
  • unity方法调用
  • js数组entries
  • python图片批量重命名
  • javascript中继承
  • android studio中r文件在哪
  • 12333医保缴费具体步骤
  • 国税系统升级后怎么添加办税人
  • 已申报的纳税申报表怎么下载打印
  • 百旺金赋天津客服
  • 惠州市房产交易税费征收标准
  • 小规模税控盘服务费怎么填增值税申报表
  • 房山税收减免政策文件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设