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 |
相关内容
热门资讯
山水皆有情！丽江两山一江的千年...
去过丽江、走过虎跳峡的人，大概率都听过哈巴雪山和金沙江的传说。很多人站在峡谷之下，望着奔腾不息的金沙...
活力中国调研行丨“殷”你而来 ...
9月12日，游客在殷墟博物馆“甲骨文展厅”内参观。位于河南省安阳市的殷墟博物馆新馆是首个全景式展现商...
浦江之夜赴美好相逢，第37届上...
9月12日晚，黄浦江畔灯火璀璨，第37届上海旅游节大巡游在外滩中山东一路上演。不少观众早早便来到外滩...
美丽中国丨秋韵紫鹊界 梯田入画...
这是9月11日拍摄的紫鹊界梯田（无人机照片）。 金秋九月，湖南省娄底市新化县紫鹊界梯田稻谷渐次成熟。...
中国之巅奏响《共同的节日》，千...
千吨阻尼器，“迎世赛、游上海旅游节”。9月13日，由上海市文化和旅游局指导推出上海旅游·会客│巅峰之...