高度塌陷问题的学习

高度塌陷：
高度塌陷指的是对子元素设置浮动之后，子元素脱离文档流，导致父元素的高度丢失的一种现象，父元素一旦出现高度塌陷，将会导致下边的元素会向上方移动，打乱整个页面的布局
其主要原理是由于在W3C标准中，每个元素都会具有一个隐藏的属性值——BFC（块级格式化上下文），此属性在默认的情况之下是关闭的。当其开启时会获得以下特性：①父级元素内外边距不会与子元素重叠；②不会被浮动元素所覆盖；③可以包含浮动的子元素。
解决的方法
①将父元素的overflow属性设置为hidden
如此一来就可以触发BFC规则使得在进行BFC高度计算时会将其中的浮动元素也一起计算
缺点：会隐藏掉溢出元素之外的内容
②在元素下方添加一个空元素
缺点：会导致代码的冗余
③万能清除法
在出现高度塌陷的元素中，添加以下代码；
after{
content:”.";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
｝