简单粗暴的解决高度塌陷问题

1.给父元素添加："overflow:hidden",

语法： ul{

　　　　width:400px;

　　　　height:400px;

　　　}

　　 　ul　li{

　　　　　　width:50px;

　　　　　　height:50px;

　　　　　　float:left;

　　　　}　　

此时ul的高度就会塌陷，解决方式：“ul{width:400px;  height:400px;  overflow:hidden}”

 

2.给父元素添加：after

语法：“ul:after{　

　　　　　　　　content:".";

　　　　　　　　display:block;

　　　　　　　　clear:both;

　　　　　　　　overflow:hidden;

　　　　　　　　visibility:hidden;

　　　　　　　　height:0;

　　　　}”

 

3.添加空标签法：在最后一个浮动的元素后添加一个空的标签

语法：html:

　　　　<div id="main">

　　　　　　<div id="floatA"></div>

　　　　　　<div id="floatB"></div>

　　　　　　<div id="clearfloat"></div>

　　　　</div>

　　　css:

　　　　#floatA{float:left}

　　　　#floatB{float:left}

　　　　.cleaarfloat{　　

　　　　　　　　　　clear:both;

　　　　　　　　　　height:0;

　　　　　　　　　　overflow:hidden;　　

　　　　}

注意：此方法空的标签必须和有浮动属性的标签同级；

 

笔者记：纯手工敲写。如有错误，还请指出。