高度塌陷
高度塌陷:子元素设置浮动,父元素未设置高度,父元素高度将消失,引起页面布局混乱
清除浮动(解决高度塌陷的办法):
1:给父元素添加高度
缺点:不灵活
2:给父元素添加oerflow:hidden;
缺点:内容超出父元素时,会被隐藏
3:给浮动子元素最后添加一个块级 兄弟元素,并设置clear:left; left right both
缺点:代码冗余
4:万能清除法
clear_ fix:after{
content:" .”;
display:block;
clear: both;
width:0;
height:0;
overflow:hidden;/*超出隐藏*/
visibility:hidden;/*隐藏本身*/
visibility和hidden:显示隐藏;
visible显示(默认值)
hidden隐藏(占据文档流)
visibility:hidden;和display:none的区别
都是对元素的隐藏
前者占据文档流,后者脱离文档流