当前位置:首页 > Web开发 > 正文

解决高度塌陷

2024-03-31 Web开发

1:给高度塌陷的元素设置overflow:hidden;
原理:因为overflow:hidden;触发了一个BFC
BFC布局规则:计算BFC高度的时候,里面的浮动元素也参与计算。
弊端:定位在当前元素外面的内容会被隐藏。

2:给出现高度塌陷的元素里面,放在浮动元素的后面,添加一个空div,并且给div{clear:both;}
原理:clear:both;忽略上面的浮动元素预留出的空间
弊端:形成不必要的空标签,代码冗余

3:万能清除法:

选择符(高度塌陷的元素):after{ content:"."; display:block; height:0; clear:both; overflow:hidden; visibility:hidden; }

解决高度塌陷-CSS

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/8620.html