【荐】万能清除浮动样式

这个是一个很流行的清除浮动的方法，在很多大项目上已经被完全采用。

这个方法来源于positioniseverything ，通过after伪类:after和IEhack来实现，完全兼容当前主流浏览器。

<style type="text/css">
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix {display: inline-block;}  /* for IE/Mac */</style>
<!-- main stylesheet ends, CC with new stylesheet below... --><!--[if IE]>
<style type="text/css">
.clearfix {zoom: 1;             /* triggers hasLayout */display: block;     /* resets display for IE/Win */
}
/* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

Update @ 2008.11.12

刚刚看到一篇日志说这个问题，受到了点启发：

.clearfix:after {content: "020";display: block;height: 0;clear: both;
}
.clearfix {zoom: 1;
}

这个是优化版的清除浮动的样式，很值得推荐。

另外，我见到了一个无敌的清除浮动的样式，这个是通过独立的代码来清除的。

html body div.clear,
html body span.clear
{background: none;border: 0;clear: both;display: block;float: none;font-size: 0;margin: 0;padding: 0;overflow: hidden;visibility: hidden;width: 0;height: 0;
}

这个样式可以通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。

这个页面正是著名的960 CSS 框架的作者的博客。而他却在960 CSS框架中同时使用了这两种方法。

项目中常用如下代码：

.clear:after {clear: both;content: " ";display: block;height: 0;overflow: hidden;visibility: hidden;
}

使用方法如下：

<div class="clear"><div class="title">xxx<div><div class="content">yyy</div>
</div>

转载于:https://www.cnblogs.com/52php/p/5657604.html

【荐】万能清除浮动样式相关推荐

万能清除法 html,万能清除浮动样式
这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用. 这个方法来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器. ...
清除浮动的四种样式写法
/* 清除浮动1 */ /* 添加额外标签使用 */ .clear { clear: both; } /* 清除浮动样式2 */ .clearfix { overflow: auto; /* over ...
前端学习（310）：清除浮动的方法
我们经常把高度塌陷问题也叫做常见的几种清除浮动的方法高度塌陷问题-父元素高度自适应,子元素float后,造成父元素高度为0,就叫做高度塌陷问题给父元素一个高度缺点:无法高度自适应父元素{o ...
CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
HTML中清除浮动的几种方法
清除float的常见几种方式: 清除浮动方法(1)在浮动元素后面使用一个空的自身清除浮动的元素. 例如 <div style="clear:both;"></di ...
清除浮动的常用的几种方法
首先我们要知道为什么要清除浮动? 如果说一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0,下面的元素会自动补位,所以这个时候要 ...
在 HTML 中清除浮动四种的方法
文章目录为什么要清除浮动清除浮动本质什么是高度塌陷? 为什么会脱标? 一.清除浮动的语法二.清除浮动的方法 1.额外标签法 2.父级添加 overflow 属性 3.父级添加 after 伪元 ...
html清除浮动有几种方法,HTML中清除浮动的几种方法
清除float的常见几种方式: 清除浮动方法(1)在浮动元素后面使用一个空的自身清除浮动的元素. 例如实例:清除容器中子元素的浮动,让父元素塌陷的高度恢复. CSS代码: .content{ wid ...
【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...

【荐】万能清除浮动样式

【荐】万能清除浮动样式相关推荐

最新文章

热门文章