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 |
相关内容
热门资讯
山海邂逅悦来玥美！青岛银丰玥美...
时光淬炼初心，山海见证成长。三百余日夜匠心耕耘，青岛银丰玥美酒店与崂山为伴，与黄海为邻，融青岛山海风...
摸鱼、钓虾、吃瓜、赏荷…初夏时...
这个周末，一场场充满野趣的“田园嘉年华”在沪郊金山多个农场上演，吸引众多市民带着孩子下乡来，赛跑、吃...
原创 戚...
5月28日，北京环球影城迎来了一对温暖的家庭画面：戚薇和李承铉携三岁半的儿子Seven现身游玩。现场...
滹沱河畔 遇见“诗和远方”
图为市民在滹沱河畔休闲娱乐。 初夏五月，惠风和畅。徜徉在石家庄滹沱河生态区（城区段），澄澈河水蜿蜒...
在迪士尼排队两小时，我才看清V...
文丨沈理 在网上看到一则新闻： 上海迪士尼，创极速光轮排队区。一个父亲牵着七八岁的儿子，已经在烈日...