ID:38231072
大小:201.20 KB
页数:6页
时间:2019-06-02
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;(留意可能产生的隐藏溢出元素问题);如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;正文中使用邻接元素清理之前的浮动。优点:可以有效
此文档下载收益归作者所有