首页 > 代码库 > div标签清除float浮动样式方法
div标签清除float浮动样式方法
这个方法来源于positioniseverything ，通过after伪类实现，完全兼容当前主流浏览器。
1 <style type="text/css">
2 .clearfix:after {
3 content: ".";
4 display: block;
5 height: 0;
6 clear: both;
7 visibility: hidden;
8 }
9 .clearfix {display: inline-block;} /* for IE/Mac */
10 </style>
11 <!-- main stylesheet ends, CC with new stylesheet below... -->
12 <!--[if IE]>
13 <style type="text/css">
14 .clearfix {
15 zoom: 1; /* triggers hasLayout */
16 display: block; /* resets display for IE/Win */
17 }
18 /* Only IE can see inside the conditional comment
19 and read this CSS rule. Don‘t ever use a normal HTML
20 comment inside the CC or it will close prematurely. */
21 </style>
22 <![endif]-->
方法二、
还有一个无敌的清除浮动的样式，这个是通过独立的代码来清除的。
1 html body div.clear,
2 html body span.clear
3 {
4 background: none;
5 border: 0;
6 clear: both;
7 display: block;
8 float: none;
9 font-size: 0;
10 margin: 0;
11 padding: 0;
12 overflow: hidden;
13 visibility: hidden;
14 width: 0;
15 height: 0;
16 }
可以通过在页面div中添加clear样式来清除页面中的浮动。
1 <div class=”clear”> 2 </div> 3 或 4 <span class=”clear”> 5 </span>
方法三、
实际项目中常用如下代码：
1 .clear:after {
2 clear: both;
3 content: " ";
4 display: block;
5 height: 0;
6 overflow: hidden;
7 visibility: hidden;
8 }
使用方法如下：
1 <div class="clear"> 2 <div class="title">标题<div> 3 <div class="content">内容</div> 4 </div>
div标签清除float浮动样式方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。