以图明志

CSS

最优的浮动清除方案之一推荐

W3标准不变,清除浮动不止
对于日新月异的WEB开发技术和浏览器更新频率来说,清除浮动已然是一个被人嚼碎了的话题。说是这些年过去了,有关float的地方,还依然少不了清除浮动的标签和css代码。W3C整天研究html5,就不能抽出点时间来把这种烦人的小细节修正一下吗?抱怨归抱怨,饭还得吃,钱还得挣,清除浮动就不能停止。

CSS

关于浮动、布局和块级格式化

clear float,has layout,block formatting context
float是网页布局中都要使用的css属性,他为我们灵活布局提供了方便,但同时浮动太多会带来很多麻烦,所以我通常的做法是使用float完后,马上清除他。float的本质是脱离的正常的html文档流,就是由于他脱离的文档流才出现了很多麻烦。用after产生的内容是个空格,先display:block,然后高度为0,不让他影响布局。

CSS

CSS一个解决浮动问题的hack

Clear:both其实是有瑕疵的
原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。但这种办法就是最好了的吗?我这么说,当然答案就不是了。可以采用通过Hack实现。

Web设计理念

让某部分HTML随滚动始终显示在页面上

JavaScript仿淘宝智能浮动
我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端。如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡。这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE、Firefox、Chrome下都能正常工作。

CSS

解决频繁清除浮动的一个思路

清除浮动的一个小技巧
浏览器FireFox,Chrome下,li之间有缝隙,Google得知缝隙由字体大小产生,所以另外加入hack来除缝。而这两种实现方法中,float:left要比display:inline;的表现方式要好。因为内联(display:inline;)属于行布局,其特性是在一行里进行布局,所以不能被设定宽高。块级元素的布局相对于内联样式要精确的多。所以尽量使用float:left;

CSS

span float:right后右对齐换行问题

需要对浮动进一步了解
当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥也就是说,你的span是float:right,但是你文本还是float:none。如果要让两者在同一行的话,有两种方法。把span先于文本显示,或者或者把文本也设成float。
1 / 1 首页 < Prev 1 Next > 尾页 页码: