成为VIP什么是clearfix？
The clearfix, as the name suggests, is used to clear floats. It is generally used in float layouts. The clearfix is considered a hack to clear floats.
Overflow Issue
Example
的中文翻译为：
示例
Let us see the problem first before moving towards the solution. We have an image here, floated to the right. It overflows outside its container since it is way taller than the element belonging to it −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>We haven't used clearfix below:</p>
<div>
<img class="myimg" src="https://www.tutorialspoint.com/machine_learning_with_python/images/machine-learning-with-python-mini-logo.jpg" alt="Machine Learning" width="150" height="150">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
The output displays the overflow issue −
使用overflow auto修复清除浮动问题
Example
的中文翻译为：
示例
Let us now fix the issue with clearfix −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2 style="clear:right">Demo Heading</h2>
<p>We have used clearfix below:</p>
<div class="clearfix">
<img class="myimg" src="https://www.tutorialspoint.com/machine_learning_with_python/images/machine-learning-with-python-mini-logo.jpg" alt="Machine Learning" width="150" height="150">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
使用::after选择器修复清除浮动
Example
的中文翻译为：
示例
The ::after选择器在这里用于修复clearfix −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2 style="clear:right">Demo Heading</h2>
<p>We have used clearfix below:</p>
<div class="clearfix">
<img class="myimg" src="https://www.tutorialspoint.com/machine_learning_with_python/images/machine-learning-with-python-mini-logo.jpg" alt="Machine Learning" width="150" height="150">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
以上就是什么是clearfix？的详细内容，更多请关注双恒网络其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
