html - Clearfix-Bug 负边距

Question

我注意到每个人都在使用的“默认”clearfix 有问题。由于某种原因，.gallery 上的负边距打破了它。我找不到任何合适的解决方案。我发现的那些会干扰我页面的其他部分。

所以我只需要修复 clearfix 本身。

还有另一个 CSS 解决方案可以添加到 .gallery 并且不是 overflow: hidden 将是 - 让我们说:OK .

谢谢!

.gallery {
  position: relative;
  margin: 0 -20px -20px 0; /* remove margins caused by inner items */
}

/* ##### Please fix this clearfix ##### */
.gallery:after {
  display: table;
  clear: both;
  content: '';
}

.gallery .galleryItem {
  margin: 0 20px 20px 0;
  width: 100px;
  height: 100px;
  background: #666;
  float: left;
}



/* ----- do not edit below - this part contains prerequisites ----- */

.teaser {
  position: relative;
  margin: 0;
  padding: 20px;
  background: #444;
}
.teaser .title {
  margin: 10px 0 0 0;
  font-weight: normal;
  font-size: 14px;
  background: #555;
}
.teaser + .teaser {
  margin-top: 20px;
}
.teaser:nth-child(1) .galleryItem {
  background: #cc6600;
}
.teaser:nth-child(2) .galleryItem {
  background: #cc0000;
}
.teaser:nth-child(3) .galleryItem {
  background: #00cc00;
}
.teaser:nth-child(4) .galleryItem {
  background: #00cc00;
}
body {
  background: #333;
  color: #eee;
  font-family: Helvetica, sans-serif;
}
#sidebar {
  padding: 10px;
  width: 380px;
}
.tooltip {
  display: table;
  position: absolute;
  left: 100%;
  padding: 10px 15px;
  background: #eee !important;
  color: #333;
  min-width: 100px;
  max-width: 300px;
  border-radius: 3px;
  box-shadow: 1px 1px 10px #000;
}
.tooltip:before {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -11px;
  border-width: 11px 11px 11px 0;
  border-style: solid;
  border-color: transparent #eee transparent;
  content: '';
}

<div id="sidebar">
  
  <div class="teaser">
    <div class="gallery">
      <div class="galleryItem"></div>
      <div class="galleryItem"></div>
      <div class="galleryItem"></div>
    </div>
    <h3 class="title">This has only a wrong "padding-top"</h3>
  </div>

  <div class="teaser">
    <div class="gallery">
      <div class="galleryItem"></div>
      <div class="galleryItem"></div>
    </div>
    <h3 class="title">Here additionally the clearfix does not work like expected</h3>
  </div>
  
  <div class="teaser">
    <div class="thisIsAWorkaround">
      <div class="gallery">
        <div class="galleryItem"></div>
        <div class="galleryItem"></div>
      </div>
    </div>
    <h3 class="title">This is like it should, but has an additional DIV as workaround =/</h3>
  </div>

  <div class="teaser">
    <div class="tooltip title">This one is like it should (has same paddings to all sides)</div>
    <div class="gallery">
      <div class="galleryItem"></div>
      <div class="galleryItem"></div>
      <div class="galleryItem"></div>
      <div class="galleryItem"></div>
    </div>
  </div>
  
</div>

同样在 Codepen (但使用 LESS =)

Answer 1

在这里 - 你不需要 clearfix - 只需添加例如display:inline-block 到 .gallery 以强制一个新的 block formatting context

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

.gallery {
  position: relative;
  margin: 0 -20px -20px 0;
  /* remove margins caused by inner items */
}
/* ##### Please fix this clearfix ##### */

.gallery {
 display:inline-block
}
.gallery .galleryItem {
  margin: 0 20px 20px 0;
  width: 100px;
  height: 100px;
  background: #666;
  float: left;
}
/* ----- do not edit below - this part contains prerequisites ----- */

.teaser {
  position: relative;
  margin: 0;
  padding: 20px;
  background: #444;
}
.teaser .title {
  margin: 10px 0 0 0;
  font-weight: normal;
  font-size: 14px;
  background: #555;
}
.teaser + .teaser {
  margin-top: 20px;
}
.teaser:nth-child(1) .galleryItem {
  background: #cc6600;
}
.teaser:nth-child(2) .galleryItem {
  background: #cc0000;
}
.teaser:nth-child(3) .galleryItem {
  background: #00cc00;
}
.teaser:nth-child(4) .galleryItem {
  background: #00cc00;
}
body {
  background: #333;
  color: #eee;
  font-family: Helvetica, sans-serif;
}
#sidebar {
  padding: 10px;
  width: 380px;
}
.tooltip {
  display: table;
  position: absolute;
  left: 100%;
  padding: 10px 15px;
  background: #eee !important;
  color: #333;
  min-width: 100px;
  max-width: 300px;
  border-radius: 3px;
  box-shadow: 1px 1px 10px #000;
}
.tooltip:before {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -11px;
  border-width: 11px 11px 11px 0;
  border-style: solid;
  border-color: transparent #eee transparent;
  content: '';
}

<div id="sidebar">

  <div class="teaser">
    <div class="gallery">
      <div class="galleryItem"></div>
      <div class="galleryItem"></div>
      <div class="galleryItem"></div>
    </div>
    <h3 class="title">This has only a wrong "padding-top"</h3>
  </div>

  <div class="teaser">
    <div class="gallery">
      <div class="galleryItem"></div>
      <div class="galleryItem"></div>
    </div>
    <h3 class="title">Here additionally the clearfix does not work like expected</h3>
  </div>

  <div class="teaser">
    <div class="thisIsAWorkaround">
      <div class="gallery">
        <div class="galleryItem"></div>
        <div class="galleryItem"></div>
      </div>
    </div>
    <h3 class="title">This is like it should, but has an additional DIV as workaround =/</h3>
  </div>

  <div class="teaser">
    <div class="tooltip title">This one is like it should (has same paddings to all sides)</div>
    <div class="gallery">
      <div class="galleryItem"></div>
      <div class="galleryItem"></div>
      <div class="galleryItem"></div>
      <div class="galleryItem"></div>
    </div>
  </div>

</div>