如何优雅的清除浮动?

有条件的话尽量使用弹性盒布局,就不会有烦人的浮动问题了。
当一个盒子的子元素浮动后,父元素的高度会塌陷。在css中给父元素添加伪元素即可清除,代码如下:

.clearfix::after,.clearfix::before{
  content:" ";
  display:table;
}
.clearfix::after{
  clear:both;
}

然后在父元素的类中引用clearfix类即可。
before微元素可防止元素顶部空白崩溃(即margin叠加或者叫顶部塌陷),display:table clear:both创建一个匿名的表格单元,会触发浏览器的BFC,即渲染独立,浮动元素的高度计算在父元素的总高度之内。
如此,清除浮动就完成了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,870评论 1 92
  • 有条件的话尽量使用弹性盒布局,就不会有烦人的浮动问题了。当一个盒子的子元素浮动后,父元素的高度会塌陷。在css中给...
    易路先登阅读 864评论 3 17
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 1,009评论 0 2
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 1,086评论 0 2
  • 很开心,最近不论怎样,都是在12点之前睡觉的,所以早上醒的很早,也是蛮开心的一件事。下一步就是于我自己的情绪,我还...
    笑莉说阅读 139评论 0 0