场景:a、b、c左浮动,d是与a、b、c同级的div
分析:d受a、b、c浮动的影响会顶到头部,想要让d不受a、b、c浮动的影响(清除浮动)有以下几种方法
-
将a、b、c包裹在父元素div中,在div内部的最后嵌套一个空标签,并设置clear:left / right / both属性即可。
-
(推荐)空标签加强版,给父级添加伪类选择器(:after)来实现。
// 可以封装成一个类,之后在需要的地方添加该类即可 .clearfix:after { content: ''; // 设置内容为空 clear: both; // 清除浮动 display: block; // clear属性只对块元素生效,伪类是内联元素,需要转为block }
注:上述方法对IE低版本不兼容,可以通过zoom: 1;来兼容IE低版本。
.clearfix { zoom: 1; // 兼容IE低版本 }
-
为d设置clear:left / right / both。
① left:表示该元素不受左浮动的影响
② right:表示该元素不受右浮动的影响
③ both:表示该元素不受左、右浮动的影响 -
将a、b、c包裹在父元素div中,并给div设置合适的高度(设置高度是因为浮动的元素不占据位置,无法将父元素撑开)。此方法不推荐,因为需要手动来控制高度,比较麻烦。