使用clearfix样式来清除浮动
2013-05-29 22:41
609 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!-- /** * Created by JetBrains WebStorm. * User: Ganler * Date: 13-5-29 * Time: 下午10:31 * To change this template use File | Settings | File Templates. */ --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; } </style> </head> <body> <div style="border:2px solid red;"> 没有clear的效果 <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">CSSBBS</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> </div> <div style="border:2px solid red;margin-top: 100px;"> clear:both <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">CSSBBS</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="clear:both;"></div> </div> <div style="border:2px solid red;margin-top:100px;" class="clearfix"> 父容器使用 clearfix <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">CSSBBS</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="clear:both;"></div> </div> </body> </html>
相关文章推荐
- [CSS]clearfix 清除浮动元素及去掉浏览器默认样式
- CSS之使用clearfix清除浮动
- Clearing Floats清除浮动--clearfix的不同方法的使用概述
- clearfix清除浮动进化史
- css基础 clear属性:both 使用div块清除左右浮动的简单示例
- 清除浮动,clearfix的几种解决方案
- 列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。
- div添加背景图时候与清除浮动样式冲突
- 清除浮动:clearfix
- DIV 清除样式浮动万能代码
- 关于clearfix清除浮动
- CSS之关于clearfix--清除浮动
- div标签清除float浮动样式方法
- css基础 clear属性:both 使用div块清除左右浮动的简单示例
- clearfix:after清除浮动的用法及测试代码
- 列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。
- 样式 : 清除过的浮动
- CSS之关于clearfix--清除浮动
- 清除浮动(clearfix)[转]
- css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both