*关于网页设置高度自适应过程中的高度塌陷问题的解决方法及解释

出现的场景：

当子元素有浮动，父元素没有设置高度，或者设置的是最小高度的时候，父元素会出现高度塌陷问题。

（IE6里面一般不会出现高度塌陷问题，会自己撑开）

解决高度塌陷的方法：

方法1 ：给高度塌陷的元素添加 overflow：hidden 声明。

原理：因为overflow：hidden；触发了一个BFC（独立渲染区），在BFC布局过程中：计算BFC高度的时候，里面的浮动元素也参与计算 -----（后期我学习之后再来解释BFC）

弊端：overflow：hidden会隐藏超出父元素的内容（不过这里有些不明白，既然父元素已经设置为自适应了，里面的内容只会撑大父元素，怎么会被隐藏呢？有别的想法的同学可以留言给我解释一下）

方法2 ：给浮动元素的后面再加一个div，并给空的div设置样式{clear：both;(height:0px;overflow:hidden;)}

clear：both；起到一个关闭浮动的作用，清除该div前面一个元素浮动预留的空间，使该div服从文本流，在浮动元素换行显示，从而将父元素撑大。

/*括号内的属性只在IE6中必须加上，而其他浏览器可以不加*/

弊端：造成代码的冗余。

方法3 ：万能清除法

选择符：after{content : ".";clear : both ; display : block ; heigth ; 0 ; overflow : hidden ; visibility : hidden ; }

选择符{zoom：1；}

解释：<1>伪对象（伪元素）（IE6不支持，必须用在块状元素上面）

a.选择符：after {content：“ ”；} //在当前选择符里面的元素后面添加一个元素，内容是空格

b.选择符：before {content：“ ”；}

c.选择符：first-letter { };

d.选择符：first-line { }；

<2> clear：both；//关闭浮动

<3> zoom:1; //专门用来解决IE6的问题，对于其他浏览器来说，这个属性没用

一般情况下为了方便，将万能清除法写在一个类中，当有元素需要解决高度塌陷问题时，直接将这个类加入该福分元素就行了

例：

.clear-fix:after{
	content: ".";
	clear: both;
	display: block;
	height: 0px;
	overflow: hidden;
	visibility: hidden;
}
.clear-fix{zoom:1;}

//其他知识点

关于display：none；//元素隐藏，不再占用空间

visibility：hidden；//元素隐藏，所占空间没有改变，等于留出了一块空白区域

css3伪类：选择符：：selection { background：red ； color：blue；}；//改变该元素中内容被选中后的背景颜色和字体颜色

来源：CSDN

作者：假行僧1996

链接：https://blog.csdn.net/qq_38709972/article/details/81738040

标签

高度自适应中的高度塌陷问题