具有负边距的Clearfix-Bug

Question

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

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

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

谢谢！

＆＃13;

＆＃13;

.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: '';
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Codepen （但LESS =）

相同

Answer 1

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

  

块格式化上下文是a的可视CSS呈现的一部分   网页。它是块框布局的区域   并且漂浮物彼此相互作用。

.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>