子标签float父标签div高度自适应问题(4种解决方法)
经常出现子标签浮动(float),父div不能自适应的问题,如下面的代码,li是float:left,外面div高度自适应`
白芍
丹参
红景天
姜黄
解决方法: 1)在子标签的最后加上清除浮动的标签 可以在ul的下面加上以下代码,清除浮动2)给div加[**css**](https://www.weixing.me/tag/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 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常. 推荐使用前两种方法!!
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WEIXING.ME!
评论