我们粗略的一起来看看清除浮动的办法一共有多少个。对应的DEMO
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);或者在mouseover造成宽度改变时会出现最外层模块有滚动条(IE)。
建议内个模块使用,请勿嵌套。
3. 优点结构语义化完全正确,代码量极少。
缺点内容增多时候极易不会自动换行而内容被隐藏掉。
建议宽度固定时使用,请勿嵌套。
4. 优点结构语义化完全正确,代码量极少。
缺点盒模型属性已经改变,可想而知奇异事件自然多得你数都数不到。
建议如果你不想改Bug改死你的话,最好不要使用;不过可以作为alpha版本当中临时性的忽悠下测试。
5. 优点代码量极少,复用性极高。
缺点完全不能完美的适应语义化,不利于改版以及需求变更。
建议初学者使用,可以让你快速的解决浮动问题。
6. 优点语义化程度比第5种情况要更优;代码量极少,复用性极高。
缺点语义化依旧不完美,不利于改版以及需求变更。
建议初学者使用,可以让你快速的解决浮动问题。
7. 优点语义化程度比第5、6种情况要更优;代码量最少,复用性极高。
缺点语义化依旧不完美,不利于改版以及需求变更。
分享到:
相关推荐
浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间,这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是,由于浮动特性,容器...
使用display:table,来清理浮动。
js 图片广告可以左浮动 右浮动 底部浮动 底部浮动是一直置于底部
004浮动的菜单 004浮动的菜单 004浮动的菜单
浮动f
浮动菜单集会,包括各式各样的菜单浮动, 浮动菜单集合,各式各样的浮动,菜单
浮动和清理 实例 1.float 属性的简单应用 使图像浮动于一个段落的右侧。 2.将带有边框和边界的图像浮动于段落的右侧 使图像浮动于段落的右侧。向图像添加边框和边界。 3.带标题的图像浮动于右侧 使带有标题的图像...
js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现
如何css语言实现浮动的功能,在文件的style里有实现浮动的代码。
浮动窗口制作资料浮动窗口制作资料浮动窗口制作资料浮动窗口制作资料浮动窗口制作资料浮动窗口制作资料浮动窗口制作资料
基于动易sf5.9做的浮动广告模型。欢迎下载交流。 JS文件 放在根的JS目录下,并在相关页面引用。 数据源:浮动广告_数据源.config 内容模板:浮动广告内容页模板.html 模型文件:浮动广告模型模板.xls 标签:国信_...
左右广告 浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告
主要用Qt实现浮动窗口,并在浮动窗口中动态布局窗口上的控件。
解析和浮动广告解析和浮动广告解析和浮动广告解析和浮动广告解析和浮动广告解析和浮动广告
js浮动浮动层显示,帮助层的应用,同时利于javaScript特效应用
机器人软浮动功能主要应用于工件抓取和机器人机床上、下料步骤,软浮动功能在开启后,机器人可以受外力改变姿态。
这是用浮动水平线算法实现的一个球体模型,可以进行各项参数设置
HTML 使用浮动框架.doc HTML 使用浮动框架.doc
微信头 标题栏可以滑动 仿天猫浮动选项按钮或滚动到顶部按钮
可以任意的浮动,上下左右的停靠,很简单的实现了浮动工具栏的功能