.clear 万能清除浮动(clearfix:after)

有时候我们需要清楚浮动的一些操作,这里介绍的是clearfix:after的实例代码,需要的朋友可以参考下

 

一般情况下:

 

复制代码
代码如下:

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;
}

还有一种是

 

复制代码
代码如下:

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

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

使用方法:通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。

时间: 2024-09-23 22:20:54

.clear 万能清除浮动(clearfix:after)的相关文章

css清除浮动clearfix:after的用法详解

如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开. 解决方法:   CSS代码:   复制代码 代码如下: .clearfix:after { content: "." ; display: block ; height: 0 ; clear: both ; visibility: hidden ; } .clearfix{ display: inline-block; } /* Hides from IE-mac

清除浮动clearfix

一直有在用,但是没有分析几种清楚浮动的方法和他们之间的比较. 为什么要清除浮动? 盒子里用了CSS float属性,父级对象不能被撑开. 这是6个float:left的<li>,父级<ul>添加上了边框,明显没有撑开. 这样的副作用是什么? 背景效果出不来 边框出不来 margin\paddding不正确 清除浮动的四种方法比较 使用高度 说明:在父元素上加个高度 缺点:内容的高度必须确定而且计算好,如果以后要改变或者做自适应,就很麻烦. 推荐指数: clear:both; 说明:

.clearfix:after(清除浮动)中各个属性及值详细解说

清除浮动.clearfix:after一词,从事web前端的朋友们对此不会陌生吧,下面为大家介绍的是.clearfix:after中用到的所有属性及值的含义,对此感兴趣的朋友可以参考下哈想,希望对大家有所帮助   以下代码可以这么解释: 复制代码 代码如下: .clearfix:after { <----在类名为"clearfix"的元素内最后面加入内容: content: "."; <----内容为"."就是一个英文的句号而已.也可

网页制作技巧:br玩转清除浮动

浮动|技巧|网页 先看一下br怎么玩转"清除浮动"了.使用以下代码 <br clear="all" /> 以下是代码效果演示: 运行代码框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml

CSS中使用clearfix清除浮动的方法

  首先在很多很多年以前我们常用的清除浮动是这样的. CSS Code复制内容到剪贴板 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题.但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空标签来使用. 这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化.但是我发现大型网站中 居然还在使用这种清楚浮动的方法.有兴趣的同学可以上他们首页

CSS清除浮动 万能float闭合

清除浮动,新手朋友往往不是很明白.如果不清除浮动对float进行闭合,在FF中往往会出错,本站有大量的文章进行过介绍.今天向大家推荐一个实例,非常简洁易用. 给需要闭合的DIV(class为clearfix)加上如下的CSS样式即可: .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} *html .clearfix{height:1%;} *+html .clearfix{

css利用clearfix方法清除浮动详解

一,什么是.clearfix 你只要到Google或者Baidu随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix".  代码如下 复制代码 .clearfix:after {     content: " ";     display: block;     clear: both;     height: 0; } .clearfix {     zoom: 1; } <div class=

清除浮动clear:both的应用详解

在CSS中我们会经常要用到"清除浮动"Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边.这个属性是用来控制float属性在文档流的物理位置的. 当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除. 比如:<p style="f

clearfix清除浮动闭合容器之:after与:before

在平常我们coding时候经常会发生子元素浮动而引起父级元素不能完全撑开的状况, 可能很多朋友给父级元素用overflow:hidden简单粗暴的解决,但这种方式有弊端,一是在IE6下不能完美解决,二是假如在该模块有定位的层就有定位层显示不完整的可能. 也有可能有些朋友是在父级元素里最后添加一个<div style="clear:both"></div>来解决这个问题,但这样我们的HTML代码里就多了些冗余的代码且从语义化角度来看这也是不合理的. 伪类:befo