浮动清理方法

浮动清理方法

ID:38231072

大小:201.20 KB

页数:6页

时间:2019-06-02

浮动清理方法_第1页
浮动清理方法_第2页
浮动清理方法_第3页
浮动清理方法_第4页
浮动清理方法_第5页
资源描述:

《浮动清理方法》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、←感谢苹果,新主题进度归零免费WordPress主题——《Field》→清理浮动的那些事儿(1)——6种清理浮动的方法发表于2011年02月01日由Sivan文章目录[-]1.前言2.清理浮动的方法1.使用带有clear属性的空元素2.使用CSS的:after伪元素3.使用CSS的overflow属性进行怪异处理4.给浮动元素的容器添加浮动5.使用邻接元素清理6.其他方法3.我的解决方案1.综合运用方案2.一劳永逸方案4.小结前言(update2011.02.01)配合图片重写了一下本文。近期有一项目涉及修改别人所写的主题

2、,在清理浮动的环节上无比痛苦。在此整理一下关于清理浮动的方法和我的看法,希望能提供一些参考作用。浮动(Float)最初的定义我想只是为了实现图文环绕效果,而如今通常在多栏布局时使用,是CSS里最最常用的一种布局手段。比起圣杯布局等,它更加容易上手并容易处理布局问题。由于浮动的特性,在布局中使用就产生了两个问题——会对后面的元素造成影响而且造成浮动元素的容器高度失效。因此我们需要随时清理浮动,方法有很多但各有弊端。选择合理的清理方式除了让代码看起来更优雅,还会对日后维护提供很大的方便。清理浮动的方法使用带有clear属性的空

3、元素在浮动元素后使用一个空元素如

,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<brclass="clear"/>或来进行清理。我想说这并不是一个好方法,尽管它兼容所有浏览器并且随用随清。这个方法需要添加大量无语义的html元素,你能想象一个并不算复杂的footer里就使用4次div.clear吗?天哪!使用CSS的:after伪元素给浮动元素的容器添加一个clearfix的class,然后给这个c

4、lass添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Blockelement)清理浮动。这是我认为目前比较完美的解决方式。如图所见,通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格“/20”或点“.”(后者可理解为一些国外书籍过时的介绍:0)并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout(你可以把它写到IE6、7的CSShacker文件里,这样不会影响W3C标准验证)。该方法需要给每组浮动元素

5、都添加一个容器,推荐在页面布局时使用。大量使用依旧会对代码量造成一些影响。另外我想说的一点:我倾向于《无懈可击的Web设计II》一书中提到的把.clearfix改为.group,让代码的可读性更好。group说明内部元素为一组,使用clearfix客户会误认为“你写了些神马?竟然用了这么多‘修正’!”。使用CSS的overflow属性进行怪异处理给浮动元素的容器添加overflow:hidden;或overflow:auto;可以怪异清理浮动。在清理浮动前(如箭头上图),浮动的元素跳离了container层,自己跑到上层去

6、了(用阴影表示)。在添加overflow属性后(如箭头下图),浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。虽然很多地方以“将来浏览器可能不兼容”为由,不建议使用此方法。我倒是觉得目前使用此法的国内外网站众多,浏览器短时间内并不会在此问题上后退处理。此外这个方法无需添加额外的class,在做主题时比较实用。我建议在局部和无法添加class的地方使用该方法清理浮动,但是不要作为主要清理浮动方式。overflow:auto;还是不要用了。给浮动元素的容器添加浮动给浮动元素的容器也添加上浮动属性即可清理内部浮动。

7、同overflow法一样无须添加额外的class,使用方便但是会对下面的文档造成影响。建议在容器原本就浮动或者容器使用了绝对定位时使用该方法。不要在主要布局中使用。使用邻接元素清理什么都不做,给浮动元素后面的元素添加clear属性。要确保的是content元素跟两个浮动元素都在同一层container容器内,如果content在container元素后面,建议使用:after伪元素清理。其他方法使用display:table模拟表格布局也可以解决浮动的问题,并可自动对齐高度。但是由于table的一系列问题,还是不要使用了。

8、我的解决方案综合运用方案在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;在小模块如ul或textwidget里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题);如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;正文中使用邻接元素清理之前的浮动。优点:可以有效

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签