清除浮动

结合多种清除浮动的方式,总结起来即只要触发BFC即可清除浮动,可以触发BFC的css样式包括:

  • display: inline-block
  • display: table-cell
  • display: table-caption
  • float
  • overflow: hidden或auto

结合after和before~给出一种清除浮动的方式:

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

给before也加上content并且设置display: table是为了防止设置了清除浮动的元素其margin-top和上一个元素的margin-bottom重合

要不要给before加这个设置应视具体情况而定

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题。当然,随着时间的推移...
    郝特么冷阅读 860评论 0 6
  • 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:浮动元素不在普通的文档流中...
    在乎者也阅读 1,210评论 0 1
  • 建议在PC端阅读本文面向对象:对标题中的概念基本不了解或仅仅听说过名字的人。如果已有一定了解请直接拉到最下看推荐阅...
    粉肠w阅读 605评论 0 0
  • 文章版权归饥人谷_Lyndon以及饥人谷所有。 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分...
    HungerLyndon阅读 2,409评论 4 10