很多前端都是用.clearfix:after{ .....} 和 .clearit{....}的组合 来清除浮动,下面我来讲解下这俩种的用法:首先大家切页面经常用到浮动 float:left; float:right; 有浮动就需要清除他们,after伪类由于受到ie6 7的不支持所以大多数时候,一般都需要定义一个固定的class名设置属性clear的值both的div两者配合使用.///////////////////////////////////////////////第一种结构 1 此时不清除浮动 标准浏览器 和ie8+ p标签会跑到 右侧浮动div的旁边 如图:IE6 IE7下我们可以看出,标准和ie8下 class名为main的div 没被撑开,IE6 IE7下却被浮动元素撑开了。我们只需要解决 标准 和IE8+的浮动就可以;现在我们给main 追加个class名如下:IE6 下元素继承浮动跑到 浮动元素旁边 而且 有自己的背景IE8+ 和标准最后一个DIV没继承浮动 但是元素内的 内容 被挡在浮动DIV后面,背景消失,钻入浮动元素底下。此时 给右侧DIV加clearfix class名;如下图: 标准下和ie6+下 效果不变;ie6+ 和标准下 如下图:此时 ie6+和标准下 显示效果一致 浮动被清除;这种简单结构的时候也可给最后一个div设置 clear:both 这个属性和值;也能得到此效果,在结构比较复杂 清除频繁的时候 不如 在浮动元素后面 加一个 更方便, 当然 能用after伪类清除浮动的时候尽量用 伪类清除,这要 既减少冗余代码,用能便于以后修改和维护!!!
左侧
右侧
// 此处追加
因为我们在css中设置了 .clearfix:after{..}所以浮动就不会继承下去此时给 .main加上背景{ background:blue}; 我们发现 标准和 IE6+ 的main 都已被撑开如下图:IE6下标准下:其他浏览器下就不截图了。//////////////////////////////////////////第二种结构 此时需要用到 .clearit{ ...}////////此时浮动 元素 和不需要浮动的元素 被包在同一个 父亲下左侧
右侧
左侧
右侧
最后一个
左侧
右侧
最后一个
左侧
右侧
//换种方法加上class为clearit的div 最后一个