了解Bootstrap的clearfix类?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (70)
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}
  1. 为什么不使用display:block
  2. 另外,它为什么也适用于::before伪类?
提问于
用户回答回答于

.clearfix被定义在less/mixins.less

这个“micro clearfix”生成伪元素并将其设置 displaytable。这会创建一个匿名表格单元格和一个新的块格式上下文,这意味着:before伪元素可以防止上边距崩溃。所述:after伪元件用于清除浮体。因此,不需要隐藏任何生成的内容,并减少了所需的代码总量。 包括:before选择是不是需要清除浮动,但它可以防止顶边距在现代浏览器崩溃。这有两个好处:

  • 它确保与其他浮点遏制技术的视觉一致性,这些技术创建一个新的块格式上下文,例如, overflow:hidden
  • 它在zoom:1应用时确保与IE 6/7的视觉一致性。
用户回答回答于

display:table正在使用,因为display:block没有这样做。display:block即使使用:before元素,使用边距也会崩溃。

有一个警告:如果vertical-align:baseline在表格单元格中使用带有固定<div>元素的元素,Firefox将无法很好地对齐。

扫码关注云+社区

领取腾讯云代金券