高度塌陷解决方法

最新推荐文章于 2023-08-20 02:14:14 发布

·港岛妹妹

最新推荐文章于 2023-08-20 02:14:14 发布

阅读量4.4k

点赞数

分类专栏： HTMLandCSS 文章标签： css

本文链接：https://blog.csdn.net/qq_44417271/article/details/107825288

版权

15 篇文章 0 订阅

订阅专栏

可以个固定高度去解决解决高度塌陷问题，
弊端：但是不能让元素高度自适应了

overflow：hidden;解决高度塌陷并能实现高度自适应的方法一；（遵循BFC的显示原则）弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏；

在浮动元素的下方添加一个空元素，并且给他设置一下属性：空标记：

clear:both;height:0;overflow:hidden;
弊端：会添加很多空标记，增加结构负担，产生代码冗余；

display:table; 给父元素添加display：table；让父元素转换元素类型跟表格的特性一样；
弊端：会改变当前元素的元素类型；

**万能清除法：

:after{
	content:“";
	clear:both;
	display:block;
	height:0;
	overflow:hidden;
	visibility:hidden;
	}

		说明：推荐使用万能清除法；
			弊端：单词太多，不好记；**

关注