1.加入<div style=" clear:both; "></div>,解决撑开父元素。
2.利用CSS hack
div.List_Box2 div.item p.thumb{
float:left;
width:100px;
padding:0 13px 0 13px; /*Chrome识别*/
*padding:20px 13px 0 13px; /*IE识别*/
}
参考:
关于div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题
方法一:这个方法的关键在于用了clear:both来清除了浮动元素,把父元素all1撑开。
html:
<div id="all1">
<div id="left1">1</div>
<div id="left2">1</div>
<div style=" clear:both; "></div>
</div>
css:
#left1{ float:left;width:200px;}
#left2{ float:left;width:200px;}
#all1{}
方法二:此方法的重点在于,子元素有float之后,父元素需要设置一个overflow:hidden;,这样就可以自动撑开父元素aa。
*overflow:hidden之后,超出父元素位置的子元素就看不到了
html:
<div class="aa">
<div class="bb">sffsssssssssssss</div>
<div class="cc">sffss</div>
</div>
css:
.aa{ border:1px solid #000; background:#CC4;overflow:hidden;}
.bb { border:1px solid #f00; background:#999; float:left;}
.cc{ border:1px solid #f00; background:#999; float:left;}
============================================================
CSS hack技术
.color{
background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF; /*IE6、IE7会变为蓝色*/
_background-color: #009933; /*IE6会变为绿色*/
}
---------------------------------------------------------------
background: red; /* 对FF Opera和Safari有效 */
#background: blue; /* 对 IE6 和 IE7有效 */
_background: green; /* 只对IE6有效 */
/*/background: orange;*/ /** 只对IE8有效 **/
!important /*FF、IE7有效*/
* /*IE都有效*/
============================================================