CSS清除浮动的三种方法
在写代码的时候,有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示
下面来看看清除浮动的三种方式:
1、使用clear:both清除浮动
在代码中在放一个空的div标签,然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单,方便兼容性好,但是一般情况下不建议使用该方法,因为会造成结构混乱,不利于后期维护
<div style="clear: both"></div>
2、利用伪元素clearfix来清除浮动
给父级元素添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
}
3、使用CSS的overflow属性
当给父元素设置了overflow样式,不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了,它的本质就是建构了一个BFC,这样使得达到撑起父元素高度的效果
.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}
(资源库 www.zyku.net)
您可能感兴趣的文章
- 08-15小米mix4打开隐藏软件空间步骤分享
- 02-16华为mate40屏幕灵敏度调整方法
- 11-25红米手机如何取消纯净模式
- 02-18ThinkPHP缓存方法S()概述
- 01-18废柴音乐-废柴音乐应用软件功能介绍
- 01-11安全有驾-安全有驾应用软件功能介绍
- 01-31一加8t设置手机自动息屏时间教程
- 09-19小米平板5pro怎么设置超级壁纸
- 03-31PyPDF2的使用
- 03-07荣耀50pro设置智慧多窗应用栏方法
- 02-22DedeCMS图集上传图片无水印的BUG修正
- 02-17到底SEO逻辑是什么?SEO有没有未来呢?
- 09-14真我gtneo2怎么打开NFC功能
- 02-02opporeno5pro微信分身开启教程
- 01-09老照片修复器-老照片修复器应用软件功
- 01-24华为mate40pro实时语音转文字功能设置
- 10-15支付宝蚂蚁森林云守喵活动在哪里参与
- 03-01小米11ultra背屏刷抖音教程
- 07-05Linux rgrep命令
- 10-10抖音审核员在哪里申请
最近更新
阅读排行
猜你喜欢
- 07-09Syntax error or access violation: 1
- 02-01华为儿童手表4x远程关机步骤
- 08-16CCtalk绑定社交账号方法介绍
- 12-03快手小店申请保证金退款教程介绍
- 01-12莱特英语背单词-莱特英语背单词应用软
- 10-15米游社如何兑换商品
- 02-09解决pytorch trainloader遇到的多进程
- 02-22DedeMS内容列表标签无法调用副栏目文
- 06-25百度云
- 01-13超能游戏资讯-超能游戏资讯应用软件功