<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素清除浮动影响</title> <style> *{ padding:0; margin:0; box-sizing: border-box; } .red{ width:300px; height:200px; background-color:red; float: left; } .green{ width:300px; height:200px; background-color:green; float: left; } .blue{ width:300px; height:220px; background-color:blue; } /* 清除浮动影响 */ /* 在clearFix元素所有内容之后插入一个节点 */ .clearFix::after{ content:‘0‘; /* 伪元素彻底不显示 */ line-height:0; font-size:0; height:0; display:block; clear:both; } </style> </head> <body> <div class="clearFix"> <div class="red "></div> <div class="green "></div> </div> <div class="blue"></div> </body> </html>
原文:https://www.cnblogs.com/xuixui/p/12361942.html