手记

子元素浮动不能正常显示的解决办法

在web前端开发中,清除浮动也算是一个小难题,总结了一下解决浮动的几个方式,简单粗暴,直接有效。

问题描述:当子元素使用了float属性时,父容器无法根据子元素高度而自适应高度,为了解决该问题,通常有以下这种做法:
3.直接在父容器中清除浮动

<div class="clearfix"> <div class="fl"> </div> </div>

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block}*html .clearfix{height:1%}
    这是最直接有效的方法,而且不会带来其他影响,建议采用。

0人推荐
随时随地看视频
慕课网APP