清除浮动的方法
程序员文章站
2022-06-17 08:25:46
使用伪元素 最早的一种方式,支持 IE6 使用尾部添加元素 添加无用标签,不易维护。 生成 BFC 布局 现在最流行的一种方式 同时可以解决上下外边距合并问题 可以参考博客中的 "BFC、IFC、GFC、FFC " ......
使用伪元素
- 最早的一种方式,支持 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 布局
- 现在最流行的一种方式
- 同时可以解决上下外边距合并问题
- 可以参考博客中的
<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>
上一篇: 容器
下一篇: hdu 1427 速算24点【暴力枚举】