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 −
Demo Heading
We haven't used clearfix below:
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo scelerisque, quis porta nisl sagittis.
The output displays the overflow issue −
使用overflow auto修复清除浮动问题
Example
的中文翻译为：示例
Let us now fix the issue with clearfix −
Demo Heading
We have used clearfix below:
使用::after选择器修复清除浮动
Example
的中文翻译为：示例
The ::after选择器在这里用于修复clearfix −
Demo Heading
We have used clearfix below:
