加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

bootstrap.css:.container:before显示表

发布时间:2020-12-18 00:00:53 所属栏目:安全 来源:网络整理
导读:在bootstrap.css 你可以从Github或从http://twitter.github.com/bootstrap/#找到 为什么它使用: .container:before,.container:after { display: table; content: ""; zoom: 1; } .row:before,.row:after { display: table; content: ""; zoom: 1; } 为什么
在bootstrap.css

你可以从Github或从http://twitter.github.com/bootstrap/#找到

为什么它使用:

.container:before,.container:after {
  display: table;
  content: "";
  zoom: 1;
  }

  .row:before,.row:after {
   display: table;
   content: "";
   zoom: 1;
   }

为什么要定义display:table in .container:before / after和.row:before / after?

解决方法

http://nicolasgallagher.com/micro-clearfix-hack/

The clearfix hack is a popular way to contain floats without resorting
to using presentational markup. This article presents an update to the
clearfix method that further reduces the amount of CSS required.

http://html5boilerplate.com/docs/The-style/#clearfix:

Adding .clearfix to an element will ensure that it always fully
contains its floated children. There have been many variants of the
clearfix hack over the years,and there are other hacks that can also
help you to contain floated children,but the H5BP currently provides
this micro clearfix helper class.

  • .clearfix:before,.clearfix:after { content: ""; display: table; }
    This rule is understood by all browsers except for IE6/7. It generates
    a pseudo-element before and after the content of the element that
    contains floats. Setting display: table creates an anonymous
    table-cell and a new block formatting context. This acts to prevent
    top-margin collapse and improve the consistency between modern
    browsers and IE6/7.

  • .clearfix:after { clear: both; }
    Makes the :after pseudo-element clear the floated children of this element,
    thereby making the element expand to contain the floats.

  • .clearfix { zoom: 1; }
    Create new block formatting context in IE6/7 by triggering hasLayout

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读