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

/*

*学习过程中整理的笔记

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

*/

---

出现的场景： 

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

（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；}；//改变该元素中内容被选中后的背景颜色和字体颜色