如何清除浮动？手写clearfix

清除浮动的方法

• 父级加 overflow:hidden
• 父级设置 clearfix
• 父级也浮动

手写clearfix

.clearfix:after { content: ""; display: block; clear: both; }

演示代码

@说人话的前端 - bilibili /* .clearfix:after { content: ""; display: block; clear: both; } */ .clear { clear: both; } .box { /* overflow: hidden; */ /* float: left; */ width: 500px; margin: 50px auto; border: 5px solid red; } .left { float: left; width: 200px; height: 200px; background-color: #ccc; }