Question

从我收集的内容中，如果父容器中的浮动项目太小，则会出现某种问题。所有关于此的文件都含糊不清。有人能够以简洁的方式解释清除花车的目的是什么，不做的后果是什么？

Answer 1

简而言之，

当您在页面上浮动元素时，有时在dom中会留下空间。浮动元素下的元素将尝试占据该空间。如果你清除漂浮元素下的元素上的浮动，它说我们不想要占用空间，我们想要自己的空间。

例如，假设这是一个页面

我有3个元素|，|，|

如果我将它们放在文档中，它将像这样输出

|
|
|

如果我把它们漂浮起来我就得到了这个

|||

如果我想清除最后一个|上的浮点数我们得到

||
|

Answer 2

例如，请查看以下代码

<div class="parent">
   <div class="first-child">
      <p>Im floated left</p>
   </div>
  <div class="second-child">
      <p>Im floated left</p>
   </div>

</div>

<div class="occupy-spaceleft">
  will occupy the remaning space if the parent div has not cleared the float or else if the float is cleared means . This div will come below the parent div
</div>

这是用于清除浮动的最佳clearfix代码

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

现在只需将clearfix类包含在父

中

<div class="parent clearfix">
       <div class="first-child">
          <p>Im floated left</p>
       </div>
      <div class="second-child">
          <p>Im floated left</p>
       </div>

    </div>

这是链接 JSFIDDLE

什么是清除花车的重点？

2 个答案: