子标签float父标签div高度自适应问题(4种解决方法)

/ 0评 / 0

经常出现子标签浮动(float),父div不能自适应的问题,如下面的代码,li是float:left,外面div高度自适应


<div class="product">
<ul>
<li>
<a href=""><img src="uploads/baishao.jpg" /></a>
<p>白芍</p>
</li>
<li>
<a href=""><img src="uploads/danshen.jpg" /></a>
<p>丹参</p>
</li>
<li>
<a href=""><img src="uploads/hongjingtian.jpg" /></a>
<p>红景天</p>
</li>
<li>
<a href=""><img src="uploads/jianghuang.jpg" /></a>
<p>姜黄</p>
</li>
</ul>
</div>

解决方法:

1)在子标签的最后加上清除浮动的标签

可以在ul的下面加上以下代码,清除浮动

<div style="clear:both;"></div>

2)给div加css属性

.product
{
overflow:auto;
zoom:1;
}

overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决。

3)使用after伪类

.product:after
{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}

4)浮动外部元素,float-in-float

这种做法就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常.

推荐使用前两种方法!!

发表评论

电子邮件地址不会被公开。 必填项已用*标注