2. 使用 ::after 使用 CSS clear、content 和 display 属性
只要我们可以控制边距和填充（否则可能会看到滚动条），overflow:auto clearfix 就可以很好地工作。
但是，较新的 clearfix hack 使用起来更安全，并且大多数网页都使用以下代码：
.clearfix::after {
content: "";
clear: both;
display: table;
}
其中我们使用 ::after 伪元素。
clear 属性设置为“both”，表示左右两边都不允许浮动元素。
display 属性设置为“table”以使元素表现得像 HTML <table> 元素。
并且内容为空。
使用 clear、display 和 content 属性清除浮动的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
border: 2px solid #1c87c9;
padding: 8px;
}
.noclearfix {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.img {
float: right;
}
p {
clear: right;
}
</style>
</head>
<body>
<div>
<img class="noclearfix" src="/notebook.jpeg" alt="notebook" width="200" height="185"> 经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
</div>
<p>Add the new clearfix hack.</p>
<div class="clearfix">
<img class="img" src="/notebook.jpeg" alt="notebook" width="200" height="185"> 经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
</div>
</body>
</html>
3. 使用带有“flow-root”的 CSS 显示属性
实际上，我们已经到了不再需要 clearfix 的时候了。
clearfix 正在失去一些相关性。
Grid 和 Flexbox 正在填补网络高级布局的空白。
有一种新方法可以使用新的显示模式规则（称为 flow-root）用一行代码替换 clearfix hack。
以这种方式使用流根：
.clearfix {
display: flow-root;
}
使用 display 属性的“flow-root”值清除浮动的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
border: 2px solid #8ebf42;
padding: 8px;
}
.noclearfix {
float: right;
}
.clearfix {
display: flow-root;
}
.img {
float: right;
}
p {
clear: right;
}
</style>
</head>
<body>
<div>
<img class="noclearfix" src="/notebook.jpeg" alt="notebook" width="200" height="185"> 经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
</div>
<p>Add display: flow-root.</p>
<div class="clearfix">
<img class="img" src="/notebook.jpeg" alt="notebook" width="200" height="185"> 经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
</div>
</body>
</html>
使用显示属性的 clearfix hack 和“flow-root”值的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 1px solid #3bc9db;
border-radius: 5px;
background-color: #e3fafc;
width: 400px;
padding: 5px;
}
.container2::after {
content: "";
display: block;
clear: both;
}
.container3 {
display: flow-root;
}
.item {
height: 100px;
width: 100px;
background-color: #1c87c9;
border: 1px solid #eee;
border-radius: 5px;
float: left;
}
.clear {
clear: both;
}
.wrapper {
max-width: 600px;
margin: 40px auto;
}
</style>
</head>
<body>
<div>
<div class="wrapper">
<h2>Default behavior</h2>
<p>This item is a wrapper, which contains a left-floating block.</p>
<div class="container container1">
<div class="item"></div>
Example one
</div>
<p>
当浮动元素脱离流时，包含块上的边框仅软件包文本。
</p>
<p>
除非我们将其设置为清除，否则框后面的内容将上升并环绕浮动。
</p>
<h2 class="clear">clearfix hack</h2>
<p>
在此项目中，我们使用 clearfix hack 使包装器清除浮动项目。
</p>
<div class="container container2">
<div class="item"></div>
Example two
</div>
<h2>Using display: flow-root</h2>
<p>
CSS 现在有一种方法可以使元素清晰浮动。 显示的值设置为flow-root，我们的浮动框就被清除了。
</p>
<div class="container container3">
<div class="item"></div>
Example three
</div>
</div>
</div>
</body>
</html>
1.使用CSS溢出属性
当一个元素大于它的包含元素时，它是浮动的，它会溢出它的容器。
我们可以将带有“auto”值的溢出属性添加到包含元素以解决此问题。
使用溢出属性清除浮点数的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
border: 2px solid #1c87c9;
padding: 8px;
}
.noclearfix {
float: right;
}
.clearfix {
overflow: auto;
}
p {
clear: right;
}
.img {
float: right;
}
</style>
</head>
<body>
<div>
<img class="noclearfix" src="/notebook.jpeg" alt="notebook" width="200" height="185"> 经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
</div>
<p>Add overflow: auto;</p>
<div class="clearfix">
<img class="img" src="/notebook.jpeg" alt="notebook" width="200" height="185"> 经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
</div>
</body>
</html>
clearfix 是父元素自动清除或者修复其元素的一种方式，因此不需要另外的标记。
在浮动布局中，它通常用于元素浮动以水平堆叠的地方。
这是一个 CSS 技巧，解决了当两个浮动元素彼此相邻堆叠时发生的错误。
我们可能要做的就是在主内容块的左侧放置一个侧边列，但结果是，将有两个元素相互重叠和折叠。
该错误在浏览器之间不一致。
因此，发明了 clearfix 来解决此类问题。
其中我们将讨论 3 个 clearfix 技巧。
日期：2020-06-02 22:15:00 来源：oir作者：oir