- 浏览: 331287 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992:
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992:
就是没有返回顶部的按钮,这个页面、、
[JS代码库] -
幻紫1992:
很受用,O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco:
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520:
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
最简单的一种情形就是把一个小的、固定宽度的div元素和其他元素内容一起放在一个大的div中,比如下面:
我们可以为#inner设定一个宽度值20%,但是由于div是块级元素,即使设定了宽度,其后面的内容也只能在下一行中显示,除非给它设定一个浮动属性那么此时会产生上面提到的问题了。
如果#inner的宽度和高度都比#outer小,这不会有问题。
但是,如果#inner的高度超过了#outer,那么的底部就会超出#outer的底部。这是因为为#inner设定了float属性后,就会脱离的文本流,无论其宽度和高度怎么变化都不会使#outer跟随变化。
一、未清除浮动时的布局表现
在这个里面,最开始由于#inner的高度小于#outer所以不会有问题,但是当点击“加长”后会发现#inner的底边已经超出了#outer的范围,而#outer没有发生改变。这就是所提到的或者是闭合浮动问题
解决办法:
1、额外标签法
第一个,也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签,典型的做法就是使用:
二:使用空div闭合浮动元素
发现在Internet Explorer中<br style="clear:both" />可以清除浮动,但是不能闭合浮动元素,在Firefox中就没有这个问题。
2、使用after伪类
使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个点,因为它比较小不太引人注意。然后在利用它来清除浮动(闭合浮动元素),并隐藏这个内容:
三、使用:after伪类清理浮动
如果你不考虑 IE6/Mac用户的话只需要写* html #outer {height:1%;}就可以了。
另外,似乎在ie7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。
3、浮动外部元素,float-in-float
这种方法很简单,就是把#outer元素也进行浮动(向左或者向右)。
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化,所以使用这种方法一定要注意。有选择把页面中的所有元素都浮动起来,最后使用一个适当的有意义的元素进行清理浮动,这有助于减少不必要的标记,但是过多的浮动会增加布局的难度。
四、float-in-float
4、设置overflow为hidden或者auto
把#outer的属性overflow值设置为hidden或者auto同样可以清理浮动
这种方法不需要添加额外的标记。但是使用overflow的时候要注意,因为会影响浏览器的表现。在ie6中设置overflow为hidden或者auto并不能有效清除浮动,还要指定“#outer”的一个维度,即要么给它指定一个宽度,要么指定一个高度:
如果要在IE5/Mac上使用这种方法清除浮动的话,就必须设定overflow的属性为值为hidden。
比较
四种方法中使用哪种最好呢?首先,最好不要使用after伪类,对比其它三种方法,holly有点太烦琐,不好掌握,上面讲到的holly里面并不仅仅是IE/Win上有问题,当出现:hover时还会有其它问题,所以又加上了inline-block等属性,也就是说这种方法存在更多的不确定性。
那么其它三种方法其实都可以的。
不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,最好是能在多个浏览器上测试的页面。
而对于使用额外标签清除浮动,是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的想用那个来选。不过要注意的是,<br />本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空<div>比较合适。
float-in-float,也是一个很好的选择,把要进行清理浮动的元素外层再加上一层<div>并设置属性fload:left即可,不过要注意相邻元素的变化。
<div id="outer"> <div id="inner"> <h2>A Column</h2> </div> <h1>Main Content</h1> <p>Lorem ipsum</p> </div>
我们可以为#inner设定一个宽度值20%,但是由于div是块级元素,即使设定了宽度,其后面的内容也只能在下一行中显示,除非给它设定一个浮动属性那么此时会产生上面提到的问题了。
如果#inner的宽度和高度都比#outer小,这不会有问题。
但是,如果#inner的高度超过了#outer,那么的底部就会超出#outer的底部。这是因为为#inner设定了float属性后,就会脱离的文本流,无论其宽度和高度怎么变化都不会使#outer跟随变化。
一、未清除浮动时的布局表现
在这个里面,最开始由于#inner的高度小于#outer所以不会有问题,但是当点击“加长”后会发现#inner的底边已经超出了#outer的范围,而#outer没有发生改变。这就是所提到的或者是闭合浮动问题
解决办法:
1、额外标签法
第一个,也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签,典型的做法就是使用:
<br style="clear:both;" /> 或者使用 <div style="clear:both;"></div> 这种办法通过增加一个HTML元素把容器给弄开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。
二:使用空div闭合浮动元素
发现在Internet Explorer中<br style="clear:both" />可以清除浮动,但是不能闭合浮动元素,在Firefox中就没有这个问题。
2、使用after伪类
使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个点,因为它比较小不太引人注意。然后在利用它来清除浮动(闭合浮动元素),并隐藏这个内容:
#outer:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; }
三、使用:after伪类清理浮动
如果你不考虑 IE6/Mac用户的话只需要写* html #outer {height:1%;}就可以了。
另外,似乎在ie7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。
3、浮动外部元素,float-in-float
这种方法很简单,就是把#outer元素也进行浮动(向左或者向右)。
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化,所以使用这种方法一定要注意。有选择把页面中的所有元素都浮动起来,最后使用一个适当的有意义的元素进行清理浮动,这有助于减少不必要的标记,但是过多的浮动会增加布局的难度。
四、float-in-float
4、设置overflow为hidden或者auto
把#outer的属性overflow值设置为hidden或者auto同样可以清理浮动
这种方法不需要添加额外的标记。但是使用overflow的时候要注意,因为会影响浏览器的表现。在ie6中设置overflow为hidden或者auto并不能有效清除浮动,还要指定“#outer”的一个维度,即要么给它指定一个宽度,要么指定一个高度:
#outer { overflow:auto; width:100%; }
如果要在IE5/Mac上使用这种方法清除浮动的话,就必须设定overflow的属性为值为hidden。
比较
四种方法中使用哪种最好呢?首先,最好不要使用after伪类,对比其它三种方法,holly有点太烦琐,不好掌握,上面讲到的holly里面并不仅仅是IE/Win上有问题,当出现:hover时还会有其它问题,所以又加上了inline-block等属性,也就是说这种方法存在更多的不确定性。
那么其它三种方法其实都可以的。
不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,最好是能在多个浏览器上测试的页面。
而对于使用额外标签清除浮动,是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的想用那个来选。不过要注意的是,<br />本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空<div>比较合适。
float-in-float,也是一个很好的选择,把要进行清理浮动的元素外层再加上一层<div>并设置属性fload:left即可,不过要注意相邻元素的变化。
发表评论
-
Zepto
2015-08-15 13:49 1203Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 732//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 533Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 475Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 852首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2709Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 682特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14712流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6210首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1343通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 652一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 880<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7281. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 715一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 514看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 825最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 602最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 404做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 663在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 731<object width="940&qu ...
相关推荐
网页浮动QQ,自己做的,给一个客户使用的时候用到的,预览效果可以点击下边的链接看下是否满意 http://www.592yu.cn/xw/news/1057.html
类似网际快车,迅雷那样的可以半透明的浮动窗口.....
在将工件安装在机床上进行作业的情况下,由于工件的精度偏差,与机床之间的相对位置会出现偏移,由此可能导致工件与机床相互干涉,在将精度上有偏差的工件安装到机床上时,软浮动功能将十分有效
投中-投中统计:2月并购交易市场持续遇冷,私募基金退出数量浮动不大-2020.3-20页.pdf
RSI adaptive EMA - 浮动水平
Kaufman ama - 含有浮动水平
RSX 范围扩展指数 - 含有浮动水平
带有 浮动级别的 T3
与价格区域振荡器指标相比,此版本使用了浮动级别来发现明显级别。
Android应用源码开发Demo,主要用于毕业设计学习。
与交易量区域振荡器指标相比,此版本使用了浮动级别来判断趋势。
js实现拖动关闭的浮动窗口,一个浮动层插件代码,可任意拖动位置并关闭弹出窗口,是基于Div的浮动层效果,十分的漂亮和实用,具体的功能,官方描述如下: ① 窗口可以拖动; ② 窗口可以通过八个方向改变大小...
浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间,这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是,由于浮动特性,容器...
在超买和超卖区域加上填充的数组。
在此版本的累积波段指数平滑指标中,我们引入了一种可用于趋势评估的级别。
Android应用源码开发Demo,主要用于毕业设计学习。
网页浏览 浮动WebView-电子 Visual Studio Code中使用的“ Live Server”扩展的WebView页面,只要您需要编辑代码甚至在桌面上的其他应用程序之间切换时,该页面都将得到修复。
具体详细的阐述了css浮动如何解决和浮动产生的原因。
使用display:table,来清理浮动。