清除浮动问题

Question

css.left, .right, .center{
    &:before{
      display: table;
      content: "";
      line-height: 0;
    }
    &:after{
      display: table;
      content: "";
      line-height: 0;
      clear: both;
    }
}

有时候清除浮动后，高度就自己变的特别高了，超过了里面内容div的高度 这个是为什么

Answer 1

html*:after{
    display:'block';
    content:'.',
    visibility:hidden,
    clear:both
}

Answer 2

关于清除浮动的代码只需要after部分就可以了，至于line-height:0是没有啥意义的。可以直接是：

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

如果需要兼容性的话，那么加上.clearfix{*zoom:1;}就可以了。

至于before，那是用来防止margin折叠的；和清除浮动没什么关系。

但是不明白你说的之后高度就特别高是啥意思，可能还有其他地方代码影响了。

Answer 3

我在精通css里看到的一个demo
`.clear:after{

        content: ".";
        height: 0;
        visibility: hidden;
        display: block;
        clear: both;
    }`

浏览器会出现滚动轴。
把hight去掉之后就不会有了。
我想遇到的问题应该和你一样，很神奇，不知道怎么解释