CSS清除浮动的三个方法

用空标签清除

.clr {clear: both;}
Left
Right

使用 overflow 属性

#layout {overflow:auto; zoom:1;}
Left
Right

使用 :after (非 IE 浏览器)

#layout:after{
display: block;
clear: both; content: '';
visibility:hidden; height: 0;
}
Left
Right

注:使用 :after 需要注意几点,设置高度为零(height: 0;);content 是必须的,但其值可以为空。

时间: 2024-09-20 00:30:36

CSS清除浮动的三个方法的相关文章

CSS:清除浮动的最优方法

在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF.OP.IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了. 方法真的很简单,只要为需要清浮动的标签加上overflow这个属性. CSS代码 ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{ float:left; width:80px

css清除浮动方法和代码

  对于一个前端设计者,经常用CSS设计页面,对于清除浮动似乎是一个再基础不过的技巧了,但是清除浮动也是有很多方法和代码的,今天分享一个流行且在很多大项目上已被采用的CSS清除浮动的代码. 这个代码来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器. 上述代码是一种标准模式,效果和兼容性都是相当出色的,不过有些朋友总担心代码太多所造成的影响,可以这样优化一下,不影响清除效果,也是很不错的:

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

CSS清除浮动常用方法小结_经验交流

常用的清除浮动的方法有以下三种.      此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.         Left Right [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]      1.使用空标签清除浮动.我用了很久的一种方法,空标签可以是div标签,也可以是P标签.我习惯用<P>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义

再论清除浮动的空DIV方法

CSS 使用浮动会造成布局的混乱,通常清除浮动的方法是,利用一个如下样式的空 Div: <div class="clear"></div> .clear{clear:both;} 更为优良的 CSS 代码是: .clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clear{zoom:1;} 这个方法目前已经广泛使用,淘宝.口碑,都是这种

清除浮动的空DIV方法

CSS 使用浮动会造成布局的混乱,通常清除浮动的方法是,利用一个如下样式的空 Div: <div class="clear"></div>.clear{clear:both;} 更为优良的 CSS 代码是: .clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clear{zoom:1;} 这个方法目前已经广泛使用,淘宝.口碑 3lian素

网页设计中清除浮动的最优方法

Overflow也可以用来清除浮动方法真的很简单,只要为需要清浮动的标签加上overflow这个属性. CSS代码:ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{ float:left; width:80px; height:80px; background-color:#83B1DF; } .demo{ clear:both; border:1px solid #FF0

css清除浮动几种做法

最常用的一种  代码如下 复制代码 <style type="text/css"> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float

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{