在web前端开发中,清除浮动也算是一个小难题,总结了一下解决浮动的几个方式,简单粗暴,直接有效。
问题描述:当子元素使用了float属性时,父容器无法根据子元素高度而自适应高度,为了解决该问题,通常有以下三种做法:
1.让父元素也浮动起来,例如:
.fl{float:left;display:inline}
这种方式是会让父元素也变得浮动,影响后面的布局,其实有副作用。
2.比较常见的处理,在浮动元素后面加一个清楚浮动的空标签
.fl{ float:left;display:inline}.cb{ clear:both}
本例中cb类是为了清楚浮动而设置的,理论上没有问题,但是多加了一个空标签,一定程度上破坏了语义化。
3.直接在父容器中清除浮动
.clearfix:after{ content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{ display:inline-block}*html.clearfix{ height:1%}
这是最直接有效的方法,而且不会带来其他影响,建议采用。