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 |
相关内容
热门资讯
2025海上丝绸之路城市合作发...
11月18日至20日，以“融创融汇 合作共赢”为主题的2025海上丝绸之路城市合作发展大会暨国际旅行...
洛福敦群岛：挪威北极光下的世外...
挪威的洛福敦群岛，犹如一颗镶嵌在北极圈内的璀璨明珠，以其壮丽的自然景观和神秘的极光闻名于世。这里的雪...
“只有河南”景区无烟化管理获游...
近日，有网友在社交平台发帖称，去过“只有河南·戏剧幻城”（以下简称“只有河南”）后才发现景区禁烟保持...
四川TOP100餐厅出炉！成都...
🔥你知道吗？四川美食又上热搜了！最近高德扫街榜发布‘烟火四川’榜单，成都直接拿下58家餐厅，乐山小吃...
原创 奶...
走在2025年的城市街头，奶茶店看着比以前还琳琅满目。 高端商场里的连锁品牌、社区小巷的小众门店，几...