Question

将clearfix添加到所有div元素以防止容器崩溃情况是否是个好主意？

或者只在像这样的类上使用它？

<div class="container">
   More div elements...
</div>

.container::after {
 clear: both;
 content: “”;
 display: table;
}

Answer 1

仅当子元素使用浮点数时才使用clearfix，以避免崩溃情况。否则无需使用clearfix

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

Answer 2

作为@Chandra Shekar worte，你应该只在使用花车时使用它。但请注意一个细节如果你使用它：

在您发布的CSS规则中，您写道：# Log script functionality "Cleaning up existing *.evtx, *.zip and *.7z files to ensure efficient disk space usage...`r`n" >> $HistFile # Now cleaning up event logs at an interval of 7 days $EventLogs = GCI $Path -Include *.evtx -Recurse | ? { $_.LastWriteTime -lt (Get-Date).AddDays(-7) } If (!$EventLogs) { "No event logs to remove...`r`n" >> $HistFile } Else { "Removing the following event log files:`r`n" >> $HistFile $EventLogs | % { Try { Remove-Item $_ -EA Stop $_.FullName >> $HistFile } Catch { "Failed to remove $($_.FullName)" >> $HistFile } } } # Cleaning up zips at a greater interval of 60 days $ZipFiles = GCI $Path -Include *.zip,*.7z -Recurse | ? { $_.LastWriteTime -lt (Get-Date).AddDays(-60) } If (!$ZipFiles) { "No zipped files to remove..." >> $HistFile } Else { "Removing the following zipped files:`r`n" >> $HistFile $ZipFiles | % { Try { Remove-Item $_ -EA Stop $_.FullName >> $HistFile } Catch { "Failed to remove $($_.FullName)" >> $HistFile } } }这些是印刷报价，不会按预期工作。将其更改为常规报价，例如content: “”;，或单个（非印刷）报价，例如content: "";

Answer 3

在我看来，这是一个糟糕的主意，原因如下：

Clearfix是一个黑客。它是作为一种解决方法而引入的另一个黑客 - 使用浮动作为主要的块布局工具，他们从来没有打算（以及桌子！）。当浮动用于它们的意图（长期插入插图，表格等）他们跨越街区边界的事实（两者都有）方向，从外到内，反之亦然）是一个特征，而不是错误。不加选择地清除一切会导致丑陋的漏洞文件，文字不再适合漂浮在漂浮物周围。
Clearfixes将伪元素添加到块中。这些伪元素的大小为零，如果使用hack则不可见是什么发明的（使块包含嵌套浮点数，可选地，其子女的边缘）。但它绝对不是在其他情况下的情况。例如，如果您将此块转换为 Flexbox容器并将其设置为justify-content:space-between，您将在容器的末尾获得不需要的空间。这是因为这个伪元素会变成flex元素它会遵循Flexbox放置规则，影响其他要素的位置。网格布局也是如此。
基于clear属性的Clearfix hacks并不理想即使是含有花车！ 'clearfixed'块与它们的邻域保持相同的block formatting context (BFC)，因此它们可能受到文档中其他浮动的影响（例如浮动的前一列）。另一种包含浮子的方法，基于创建新的BFC（主要用于 overflow:hidden的形式，但也有其他选择具有自己的优势和缺点）通常更多可靠。请查看此比较的Codepen演示不同解决方案对含浮标问题的影响： https://codepen.io/SelenIT/details/qrORXm/。

就个人而言，我建议根本不使用浮动布局，因此任何事情都不需要'clearfixing'。 Flexbox比浮动版具有更多的布局可能性，浏览器对它的支持现在变为extremely good。如果没有其他方法可以解决特定的布局问题，可以使用clearfixes作为最后的手段。

将clearfix应用于所有div以防止容器崩溃

3 个答案: