清除浮动的方法

• 最早的一种方式，支持 IE6

<style>     .box {         background-color: gray;         border: solid 1px black;     }          .box .img {         float: left;         width: 100px;         height: 100px;     }          .clearfix {         *zoom: 1;     }              .clearfix:after {         content: "020";         display: block;         height: 0;         clear: both;         visibility: hidden;     } </style> <div class="box clearfix">     <div class="img"></div> </div>

• 添加无用标签，不易维护。

<style>     .box {         background-color: gray;         border: solid 1px black;     }          .box .img {         float: left;         width: 100px;         height: 100px;     }          .clear {         clear: both;     } </style> <div class="box clearfix">     <div class="img"></div>     <div class="clear"></div> </div>

• 现在最流行的一种方式
• 同时可以解决上下外边距合并问题
• 可以参考博客中的BFC、IFC、GFC、FFC

<style>     .box {         background-color: gray;         border: solid 1px black;         overflow: hidden;     }          .box .img {         float: left;         width: 100px;         height: 100px;     } </style> <div class="box">     <div class="img"></div> </div>

文章来源: 清除浮动的方法