WEB前端网页设计 HTML CSS 网页设计参数 - 【高度坍塌】
admin
2024-03-16 19:41:07
高度坍塌
高度坍塌：在流式布局中十分常见。当父元素没有高度，子元素设置了float时。
原因：子元素脱离文档流，无法撑开父元素
解决方法
| 1 | 清除浮动 | #给父元素设置高度 |
| 2 | 给父元素设置overflow：hidden； | 原理是利用overflow：hidden;创建了一个新的bfc，在新的bfc里面，自动高度会计算浮动元素的高度，于是有了这种解决高度坍塌的方法 缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。 |
| 3 最 好 用 | 给父元素设置伪类元素选择器，并设置常用的清除浮动的样式，然后after就会把盒子撑开； 右侧示例如是： berfore表示在.A的内容前面添加其他内容 after 表示在.A的内容后面添加其他内容 | .A::after{ content: ""; #添加内容 display: block; #转换元素类型为块元素 clear: both; #清除两侧浮动 height：0； overflow：hidden； #内容溢出则隐藏 visibility：hidden； #隐藏属性 } |
| 4 | 给父元素添加display：table；属性 | 让父元素转化为元素类型跟表格的特性一样 弊端：会更改父元素的类型 |
| 5 |
| 边框属性 | border-style | none无、solid单实线、dashed虚实线、dotted点线、double双实线 |
| 边框粗细 | border-width | |
| 边框颜色 | border-color |
相关内容
热门资讯
教师专享福利！北京这些景区免票...
新京报讯 据首都教育消息，教师节将至，北京多家景区为老师们准备了专属免票福利！这份优惠合集已整理好，...
黑茶，喝的是一种境界与健康
在专门用来喝黑茶的茶具“飘逸杯”里，黑茶茶汤看起来并不像“黑茶”这个名字那样黑黢黢的一团。 玻璃器皿...
上海旅游节大巡游花车阵容抢先看...
2026上海旅游节大巡游9月12日外滩启幕，21辆全新主题花车携手21支境内外表演方队联袂登场，邀你...
原创 8...
上周门诊来了位 62 岁的张阿姨，得糖尿病快五年了，平时管嘴特别严，糖果、点心、甜饮料一概不碰，连水...
原创 餐...
2026年9月8日晚，南京浦口区泰冯路29号，墨语江南·阿婆菜餐厅户外帐篷里，灯火温润，其间还天降喜...