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" style="max-width:90%" style="max-width:90%">
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" style="max-width:90%" style="max-width:90%">
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" style="max-width:90%" style="max-width:90%">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
登入後複製
#
以上是什麼是clearfix？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
