javascript - 清除浮动问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 清除浮动问题

PHPz 2017-04-10 15:04:10

[JavaScript讨论组]

545

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

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

PHPz

学习是最好的投资！

全部回复(3)

阿神2017-04-10 15:06:10 3楼

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

赞 +0

添加回复

PHP中文网2017-04-10 15:06:10 2楼

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

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

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

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

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

赞 +0

添加回复

高洛峰2017-04-10 15:06:10 1楼

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

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

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>