发布时间：2026-09-28 17:57:35 浏览次数：3
接下来是关于HTML clearfix清除浮动的详细攻略说明：
在HTML页面中，当一个元素被设置为float属性时，会使该元素脱离文档流，导致父元素的高度无法被计算，在布局上造成一定的困扰，此时就需要用到清除浮动（clearfix）。
overflow属性可以清除浮动，因为当一个元素包含浮动元素时，该元素的overflow属性会被设置为auto或hidden，从而导致该元素的高度可以被计算。
.parent { overflow: hidden; /* 或者 overflow: auto; */}通过在父元素中添加一个空的伪元素，在伪元素上使用clear属性来清除浮动。
.parent:after { content: ""; display: block; clear: both;}下面是两个示例，说明如何使用clearfix清除浮动的方法：
HTML代码：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>示例1</title> <style> .left { float: left; width: 50%; } .right { float: right; width: 50%; } .parent { background-color: #f5f5f5; /* 使用overflow属性清除浮动 */ overflow: hidden; } </style></head><body> <p class="parent"> <p class="left"> 左边内容 </p> <p class="right"> 右边内容 </p> </p></body></html>CSS代码：
.left { float: left; width: 50%;}.right { float: right; width: 50%;}.parent { background-color: #f5f5f5; /* 使用overflow属性清除浮动 */ overflow: hidden;}说明：
上述示例中，左右两个浮动元素被包含在一个父元素中，父元素通过设置overflow属性为hidden来清除浮动，从而使父元素的高度可以被正确计算。
HTML代码：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>示例2</title> <style> .left { float: left; width: 50%; } .right { float: right; width: 50%; } .parent { background-color: #f5f5f5; /* 使用伪元素清除浮动 */ } .parent:after { content: ""; display: block; clear: both; } </style></head><body> <p class="parent"> <p class="left"> 左边内容 </p> <p class="right"> 右边内容 </p> </p></body></html>CSS代码：
.left { float: left; width: 50%;}.right { float: right; width: 50%;}.parent { background-color: #f5f5f5; /* 使用伪元素清除浮动 */}.parent:after { content: ""; display: block; clear: both;}说明：
上述示例中，左右两个浮动元素被包含在一个父元素中，父元素通过添加一个空的伪元素，在伪元素上设置clear属性来清除浮动，从而使父元素的高度可以被正确计算。
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流