16 回答

• 9

  我最喜欢的方法是为父元素使用clearfix类

  .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
  }
  
  .clearfix {
      display: inline-block;
  }
  
  * html .clearfix {
      height: 1%;
  }
  
  .clearfix {
      display: block;
  }
  

  回复于 2024-05-04T09:02:27+08:00
• 4

  而不是将 overflow:auto 放在父级上，而是放入 overflow:hidden

  我为任何网页编写的第一个CSS总是：

  div {
    overflow:hidden;
  }
  

  然后我再也不用担心了 .

  回复于 2024-05-04T09:02:27+08:00
• 498

  当浮动元素位于容器框内时，该元素不会自动强制容器的高度调整到浮动元素 . 当一个元素浮动时，它的父元素不再包含它，因为浮动元素从流中移除 . 您可以使用2种方法来修复它：

  • { clear: both; }

  • clearfix

  一旦了解了发生的情况，请使用以下方法“清除”它 .

  .clearfix:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
  }
  
  .clearfix {
      display: inline-block;
  }
  
  html[xmlns] .clearfix {
      display: block;
  }
  
  * html .clearfix {
      height: 1%;
  }
  

  Demonstration :)

  回复于 2024-05-04T09:02:27+08:00
• 2

  解决方案1：

  最可靠和不引人注目的方法似乎是这样的：

  演示：http://jsfiddle.net/SO_AMK/wXaEH/

  HTML：

  <div class="clearfix">
      <div style="float: left;">Div 1</div>
      <div style="float: left;">Div 2</div>
  </div>​
  

  CSS：

  .clearfix::after { 
     content: " ";
     display: block; 
     height: 0; 
     clear: both;
  }
  

  通过一些CSS定位，您甚至不需要向父级 DIV 添加类 .

  此解决方案向后兼容IE8，因此您无需担心旧版浏览器失败 .

  解决方案2：

  已经建议对解决方案1进行调整，具体如下：

  演示：http://jsfiddle.net/wXaEH/162/

  HTML：

  <div class="clearfix">
      <div style="float: left;">Div 1</div>
      <div style="float: left;">Div 2</div>
  </div>​
  

  CSS：

  .clearfix::after { 
     content: " ";
     display: block; 
     height: 0; 
     clear: both;
     *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
  }
  
  .ie7-clear {
      display: block;
      clear: both;
  }
  

  此解决方案似乎向后兼容IE5.5但未经测试 .

  解决方案3：

  也可以将 display: inline-block; 和 width: 100%; 设置为模拟普通块元素，而不是折叠 .

  演示：http://jsfiddle.net/SO_AMK/ae5ey/

  CSS：

  .clearfix {
      display: inline-block;
      width: 100%;
  }
  

  此解决方案应向后兼容IE5.5，但仅在IE6中进行了测试 .

  回复于 2024-05-04T09:02:27+08:00
• 9

  我在适用的地方使用2和4（即当我知道内容的高度或溢出不会造成伤害时） . 在其他任何地方，我都使用解决方案3.顺便说一句，你的第一个解决方案没有超过3的优势（我可以发现），因为它不再具有语义，因为它使用相同的虚拟元素 .

  顺便说一句，我不能保证工作 . 但是在这种情况下，你的hack依赖于 overflow: auto 的确切行为 . 搭便车是没有害处的 .

  回复于 2024-05-04T09:02:27+08:00
• 2

  奇怪的是没有人为此提出一个完整的答案，啊，这就好了 .

  解决方案一：明确：两者

  添加样式清除的块元素：两者;在它上面将清除浮点数超过该点并停止该元素的父级崩溃 . http://jsfiddle.net/TVD2X/1/

  优点：允许您清除元素，下面添加的元素不受上面浮动元素和有效css的影响 .

  缺点：需要另一个标签来清除浮点数，膨胀标记 .

  注意：要回退到IE6并使其适用于弃权父母（即输入元素），您将无法使用：after .

  解决方案二：显示：表格

  添加显示：表;到父母那里，让它从花车上耸耸肩，并以正确的高度展示 . http://jsfiddle.net/h9GAZ/1/

  优点：没有额外的加价，而且更加整洁 . 适用于IE6

  缺点：需要无效的CSS以确保在IE6和7中一切都很好 .

  注意：IE6和7宽度自动用于防止宽度为100％填充，而在较新的浏览器中则不然 .

  关于其他“解决方案”的说明

  这些修复工作回到支持最低的浏览器，全局使用率超过1％（IE6），这意味着使用：after后不切断它 .

  隐藏溢出确实显示内容但不会阻止元素折叠，因此不会回答问题 . 使用内联块可能有错误的结果，孩子有奇怪的边距等等，表格要好得多 .

  设置高度确实“防止”崩溃，但它不是一个正确的修复 .

  无效的CSS

  无效的CSS从来没有伤害任何人，事实上，它现在是常态 . 使用浏览器前缀与使用浏览器特定的黑客一样无效，并且不会影响最终用户 .

  总之

  我使用上述两种解决方案来使元素正确反应并相互配合，我恳请你也这样做 .

  回复于 2024-05-04T09:02:27+08:00
• 0

  也许这个简单的例子很有用：https://github.com/imammubin/Simple-Example-Slideshow-Responsive-Layout

  回复于 2024-05-04T09:02:27+08:00
• 5

  clearfix有多个版本，其中 Nicolas Gallagher 和 Thierry Koblentz 为主要作者 .

  如果您想要支持旧浏览器，最好使用此clearfix：

  .clearfix:before, .clearfix:after {
      content: "";
      display: table;
  }
  
  .clearfix:after {
      clear: both;
  }
  
  .clearfix {
      *zoom: 1;
  }
  

  在SCSS中，您应该使用以下技术：

  %clearfix {
    &:before, &:after {
      content:" ";
      display:table;
    }
  
    &:after {
      clear:both;
    }
  
    & {
      *zoom:1;
    }
  }
  
  #clearfixedelement {
      @extend %clearfix;
  }
  

  如果您不关心对旧版浏览器的支持，那么版本较短：

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

  回复于 2024-05-04T09:02:27+08:00
• 2

  我相信最好的方法是将 clear:both 设置为即将到来的元素 .

  原因如下：

  1）IE6 / 7中不支持 :after 选择器，FF3中不支持错误，但是，
  如果你只关心IE8和FF3.5清除：以后可能最适合你...

  2） overflow 应该做别的事情所以这个黑客不够可靠 .

  作者请注意：清除时没有任何问题......清除意味着跳过浮动字段 . CLEAR与我们在一起，因为HTML3（谁知道，甚至可能更长）http://www.w3.org/MarkUp/html3/deflists.html，也许他们应该选择一个不同的名称，如page：new，但那仅仅是一个细节......

  回复于 2024-05-04T09:02:27+08:00
• 68

  将其添加到底部的父div中

  <div style="clear:both"></div>
  

  回复于 2024-05-04T09:02:27+08:00
• 6

  理想的解决方案是使用 inline-block 作为列而不是浮动 . 我认为如果你遵循（a）仅将 inline-block 仅应用于通常内联的元素（例如 span ），浏览器支持是相当不错的 . （b）为Firefox添加 -moz-inline-box .

  在FF2中检查你的页面也是因为我在嵌套某些元素时遇到了很多问题（令人惊讶的是，这是IE执行得比FF好得多的一种情况） .

  回复于 2024-05-04T09:02:27+08:00
• 9

  最着名的解决方案之一是使用伪元素而不是非语义html元素的解决方案编号3的变体 .

  它是这样的......

  .cf:after {
      content: " ";
      display: block;
      visibility: hidden;
      height: 0;
      clear: both;
  }
  

  将它放在样式表中，您只需要将“cf”类添加到包含浮点数的元素中 .

  我使用的是来自Nicolas Gallagher的另一种变体 .

  它做了同样的事情，但它非常有用 - 阻止子元素' margins from collapsing with it'的父母'（但为此你需要别的东西 - 在这里阅读更多关于它http://nicolasgallagher.com/micro-clearfix-hack/） .

  .cf:after {
      content: " ";
      display: table;
      clear: float;
  }
  

  回复于 2024-05-04T09:02:27+08:00
• 20

  将溢出更改为 auto 或 hidden 时可能会发现的主要问题是，所有内容都可以使用鼠标中键滚动，用户可能会弄乱整个站点布局 .

  回复于 2024-05-04T09:02:27+08:00
• 18

  虽然代码不是完全语义的，但我认为在每个容器的底部都有一个我称之为“清除div”的浮点数更直接 . 事实上，我在每个项目的重置块中都包含以下样式规则：

  .clear 
  {
     clear: both;
  }
  

  如果你是IE6的样式（上帝帮助你），你可能想要给这个规则一个0px的行高和高度 .

  回复于 2024-05-04T09:02:27+08:00
• 3

  我通常使用 overflow: auto 技巧;虽然严格来说，这不是溢出的预期用途，但它有点相关 - 足以使其易于记忆，当然 . 在本例IMO中， float: left 本身的含义已经扩展到各种用途，而不是溢出 .

  回复于 2024-05-04T09:02:27+08:00
• 14

  我认为另一种可能在语义上更正确的解决方案是将浮动的内部元素更改为“display：inline” . 这个例子和我在遇到这个页面时所做的工作都使用浮动div，其方式与使用span的方式完全相同 . 而不是使用div，切换到span，或者如果您正在使用另一个默认为'display：block'而不是'display：inline'的元素，则将其更改为'display：inline' . 我相信这是100％语义正确的解决方案 .

  解决方案1，浮动父级，实质上是要更改要浮动的整个文档 .

  解决方案2，设置一个明确的高度，就像画一个框，并说我想在这里放一张图片，即如果你正在做一个img标签，请使用它 .

  解决方案3，添加一个垫片来清除浮动，就像在你的内容下方添加一条额外的线条一样，也会混淆周围的元素 . 如果使用此方法，您可能希望将div设置为height：0px .

  解决方案4，溢出：自动，确认您不知道如何布置文档，并承认您不知道该怎么做 .

  回复于 2024-05-04T09:02:27+08:00