外边距溢出解决方法 高度塌陷如何解决 Vue组件基础--简单了解vue组件 自定义wordpress登陆界面全屏渐变图片轮播 聊聊js的深拷贝与浅拷贝 打造无限可能的数字时代!谈谈大数据在零售行业中的应用 9月生猪价格如何?国家生猪大数据中心:开学季带动肉类消费需求增加 江湖有故人,欢迎来到程序员的江湖 用于卫星信号载波的宽带频谱分析仪-新品发布(下) [Visual Studio 2017] 在线版软件安装教程 改变世界的webp图片技术,节约你的流量和带宽 Android APP字体随系统字体调整造成界面布局混乱问题解决方案 2020-09-03 IOS开发 多section瀑布流+悬停Header OC shell脚本一键同时推送代码至github和gitee BroadcastReceiver代码分析 不会吧,不会吧,不愧是Ajax,jQuery Ajax啊 微信小程序 使用 fly接口请求框架 面试经常会被问到的节流和防抖,一分钟理解 回流与重绘(浏览器渲染原理) Vue笔记:插槽的使用 初学Qt不会样式表怎么办,打包好的Qt样式表一键生成送给你。 javascript从入门到跑路-----小文的js学习笔记(23)------函数式编程----ForEach、filter、Reduce和Map 聚焦教育行业AI+大数据,「三盟科技」完成B1轮上亿元人民币融资 聚焦教育行业AI+大数据,“三盟科技”完成B1轮上亿元人民币融资 郭宇:28岁“退休程序员” 中信建投智信物联网灵活配置混合C基金最新净值跌幅达1.67% 中信建投智信物联网灵活配置混合A基金最新净值跌幅达1.66% 大数据透视A股复苏:盈利触底反弹 现金流大幅转正 大数据透视A股复苏:盈利触底反弹,现金流大幅转正,产能扩张提速,经营效率显著改善 观赛人数同增12.1%,大数据揭秘中超逆势飘红原因 物联网的银河,华为的桨,少年的歌 大数据显示:长沙互联网人工作满意度、幸福感指数全国第二 日本NHK电视台:贵阳利用大数据产业发展乡村经济和货物运输业 卡奥斯COSMOPlat首发国家质量基础设施物联网平台,打造行业新生态 趣互联:从自助设备SaaS系统+物联网硬件切入线下无人零售市场 苏宁基于 ClickHouse 的大数据全链路监控实践 浪潮下的大数据中心,BAT已从用户变成玩家 威胜信息:能源物联网领航者,竞争力突出、中报逆势增长 新手请进:每个Python程序员都应该知道的10个缩写词 谈谈对于IIc的理解 《信息处理技术》20春期末考试 第十一届蓝桥杯大赛第二次模拟(软件类)真题 +总结(2020年4月,C++描述) Android权限(多个权限申请) virtuoso IC61 教育免费工艺库NCSU 配置问题 浅谈Android MVP openlayers加载Mapbox底图 用大数据为顾客“画像”帮小企业互联网转型 政务上云 服务在线(大数据观察) 大数据“杀熟”?明令禁止!《在线旅游经营服务管理暂行规定》10月起施行 大数据助力福州工程项目提质增速
您的位置:首页 >开发 >

外边距溢出解决方法 高度塌陷如何解决

外边距溢出

描述

父元素没有上边框(border-top)或者没有上内边距(padding-top)给子元素设置上外边距,会作用到父元素上
<style type="text/css">#parent{width: 300px;height: 300px;background-color: gray;}#child{width: 150px;height: 150px;background-color: green;margin-top: 100px;}</style></head><body><div id="parent"><div id="child"></div></div></body>

解决方法

给父元素加上边框。弊端:增加了父元素实际占据高度

给父元素添加上内边距。弊端:增加了父元素实际占据高度

给父元素设置 overflow:hidden/auto 。弊端:元素如果想溢出显示,就冲突了

把子元素变成行内块元素 display:inline-block 。弊端:改变了子元素的显示模式

在该子元素的前面,添加一个空的元素,比如 <table>\</table> 弊端:添加无意义标签,结构化差

利用父元素的伪类 before 添加一个空 table 元素(推荐使用)

#parent::before {content:"";display:table;}

高度坍塌

描述

父元素高度自适应,子元素 float 后,造成父元素高度为0,称为高度坍塌

解决方法

w3c推荐做法,在浮动元素末尾添加一个空标签,在空标签里添加sytle = "clear:both"

优点:通俗易懂,书写方便缺点:添加无意义标签,结构化差

给父元素添加overflow:hidden|auto|scroll

优点:代码整洁,无需添加无意义标签缺点:内容增多时容易造成不会自动换行导致内容被隐藏,无法显示溢出的元素

为父元素增加伪元素 :after方式(推荐使用)

.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*zoom:1;} /*ie67专有清除浮动属性浏览器兼容*/
优点:符合闭合浮动的思想 结构语义化正确缺点:由于IE6-7不支持 :after , 使用zoom:1 触发hasLayout

使用双伪元素清除浮动(推荐使用)

.clearfix:before,clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}
优点:代码更简洁缺点:由于IE6-7不支持 :after , 使用zoom:1 触发hasLayout

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。