几种css 清除浮动的方法

1、采用伪类:after进行后续空制的高度位零的伪类层清除
  2、采用css overflow:auto的方式撑高
  3、采用css overflow:hidden的方式产生怪异适应
  4、采用display:table将对象变成table形式
  5、采用div标签,以及css的clear属性
  6、采用br标签,以及css的clear属性
  7、采用br标签,以及其自身html的clear属性

  粗略的看,他们都能将问题解决;然而他们另外一方面又有着各自的利弊。(一一对应)

1、优点结构语义化完全正确,不会产生其余的怪异问题。
  缺点复用方式不当容易造成代码量急剧增大。
  建议最外层轻浮动时使用,或清晰模块化复用方式的人使用。

2、优点结构语义化完全正确,代码量极少。
  缺点多个嵌套后,点击最外层的轻浮动框会遭成最外层至最内层内容全选(ff);或者在mouseo教程ver造成宽度改变时会出现最外层模块有滚动条(ie)。
  建议内个模块使用,请勿嵌套。

3、优点结构语义化完全正确,代码量极少。
  缺点内容增多时候极易不会自动换行而内容被隐藏掉。
  建议宽度固定时使用,请勿嵌套。

4、优点结构语义化完全正确,代码量极少。
  缺点盒模型属性已经改变,可想而知奇异事件自然多得你数都数不到。
  建议如果你不想改bug改死你的话,最好不要使用;不过可以作为alpha版本当中临时性的忽悠下测试。

5、优点代码量极少,复用性极高。
  缺点完全不能完美的适应语义化,不利于改版以及需求变更。
  建议初学者使用,可以让你快速的解决浮动问题。

6、优点语义化程度比第5种情况要更优;代码量极少,复用性极高。
  缺点语义化依旧不完美,不利于改版以及需求变更。
  建议初学者使用,可以让你快速的解决浮动问题。

7、优点语义化程度比第5、6种情况要更优;代码量最少,复用性极高。
  缺点语义化依旧不完美,不利于改版以及需求变更。
  建议引导初学者思维升级时使用,让其明白与其用classname来控制一种表现,倒不如回归到web1.0的时代的网页直接用html属性来控制表现,毕竟后者的代码量更少。

 

时间: 2024-10-24 06:59:44

几种css 清除浮动的方法的相关文章

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

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

彻底理解浮动float CSS浮动详解 清除浮动的方法

原文:彻底理解浮动float CSS浮动详解 清除浮动的方法  我们把网页的常用的布局格式分为以下三种:   1.标准流.  所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构       2. 浮动流  使我们学习的脱离标准流的第一种方式.会影响我们标准流的排列.所以,我们布局的时候,能用标准流做的,就不用浮动做.       3. 定位流   定位流也是脱离标准流的一种模式.它完全脱离标准流,不会对标

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清除浮动方法和代码

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

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

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

一个老外弄的Clearing floats(清除浮动的方法)_经验交流

我常用的都是clear:both;方法,如 <div style="clear:both">    <div style="float:left"></div>   <div style="float:right"></div> </div> 今在PlanABC看到另外这种方法,特些记录下来. div.container {  border: 1px solid #00000

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清除浮动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清除浮动 万能float闭合

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