早段时间特别的忙，忙到站点一直没有更新；但是这段时间也是偷偷的做了一些的工作，比如对站点的JS进行了压缩，构思labs分站以及聚合分站。
而此段时间最烦的是森林群里面的一群人每天上班都在吵，然后我就每次都装嫩的在里面问：“各位高手，劳烦请问一下；清除浮动怎么弄？”
清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？于是一闲下来了马上写了这样的一篇文章，不能讲面面俱到，然而基本能将我所知道的倾囊相授了。
我们粗略的一起来看看清除浮动的办法一共有多少个。对应的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种情况要更优；代码量最少，复用性极高。
缺点语义化依旧不完美，不利于改版以及需求变更。
建议引导初学者思维升级时使用，让其明白与其用classname来控制一种表现，倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现，毕竟后者的代码量更少。
转自：
http://www.ok22.org/art_detail.aspx?id=177
分享到：
相关推荐
清理浮动，即解决浮动元素导致的父容器高度塌陷问题，有多种方法： 1. 使用`clear`样式清除：在HTML中添加一个额外的元素，并应用`clear:both`样式。这将使新元素清除之前的所有浮动，从而使父容器的高度包含浮动...
使用display:table,来清理浮动。
js 图片广告可以左浮动 右浮动 底部浮动 底部浮动是一直置于底部
浮动f
Jquery左右浮动层就是利用JavaScript库Jquery实现的一种动态效果，它可以模拟类似“点击收藏到”的行为，使得用户在不离开当前页面的情况下，能够方便地访问或执行其他操作。下面我们将深入探讨Jquery左右浮动层的...
浮动菜单在网页设计中是一种常见的交互元素，它们通常位于页面的顶部、侧边或底部，随着用户滚动页面而保持在视野范围内，以便用户在任何位置都能轻松访问主要导航链接。这种设计模式提高了用户体验，因为用户不需要...
// 其他清理工作... } ``` 这就是在MFC中实现浮动菜单的基本步骤。当然，实际应用中可能还需要处理更多的细节，如键盘快捷键、菜单项的动态更新、菜单的动画效果等。通过熟练掌握MFC的类库和Windows消息机制，...
7. **清理浮动（clearfix）**：由于`float`会影响父元素的高度计算，可能会导致父元素无法完全包裹住浮动的子元素。解决这个问题的一种常见方法是使用“clearfix”类，这通常涉及添加伪类`::after`并设定`clear:both...
在网页设计中，浮动（Float）是CSS布局的重要概念，它允许元素脱离其正常文档流并使其周围的元素围绕它流动。浮动最初是为了处理图像布局而引入的，但随着时间的推移，它已成为创建复杂的网页布局的工具之一。在这个...
JavaScript中的浮动层（Floating Layer）技术是网页动态效果和交互设计中的重要概念，它允许创建在用户鼠标移动时跟随或响应的元素。这种技术在学习JavaScript时尤其有用，因为它可以帮助理解DOM操作、事件处理和CSS...
在网页设计中，浮动的菜单（Floating Menu）是一种常见的交互元素，它能够在用户滚动页面时始终保持在屏幕的特定位置，从而提供便捷的导航。这种设计技术对于提高用户体验有着显著的效果，尤其是在内容丰富的长页面...
"微薄，博客，论坛，浮动分享,收藏按钮代码"这个主题聚焦于如何在网站上集成各种社交媒体分享和收藏功能，提升用户体验，增加用户参与度。这些功能通常包括对微博、博客、论坛的链接以及浮动分享按钮和收藏功能，...
浮动和清理 实例 1.float 属性的简单应用 使图像浮动于一个段落的右侧。 2.将带有边框和边界的图像浮动于段落的右侧 使图像浮动于段落的右侧。向图像添加边框和边界。 3.带标题的图像浮动于右侧 使带有标题的图像...
在网页设计中，"左浮动"是一种常见的布局技术，它主要通过CSS（层叠样式表）来实现元素在页面上向左靠拢并保持浮动的效果。这种技术在创建浮动广告、侧边栏菜单等场景中非常实用。"左浮动html+js"这个压缩包文件可能...
在网页设计中，"漂亮的浮动框"是一种常见的交互元素，用于提供额外信息、广告、提示或者功能入口。这种设计技术可以提升用户体验，因为浮动框总能保持在用户的视线范围内，即使用户滚动页面也不会消失。标题中的...
元素的浮动是CSS中一个重要的概念，它可以让设置了浮动属性的元素脱离标准文档流，移动到指定的位置。浮动主要用于创建更复杂的布局结构。 **1.2 float属性** 在CSS中，`float`属性用来定义元素的浮动行为。其基本...
浮动窗口是一种在用户界面上可自由移动的独立窗口，它不局限于传统应用程序窗口的固定位置，可以在屏幕的任何地方显示。这种技术广泛应用于各种软件、操作系统以及移动应用中，为用户提供便捷的信息展示或操作界面。...
在移动应用开发中，微信头和仿天猫浮动按钮的设计与实现是提高用户体验的重要元素。微信作为中国最流行的社交平台，其界面设计往往被其他开发者借鉴，以提供类似的功能和交互体验。本文将深入探讨这两个特性，并结合...
360小人窗口是360产品的一个标志性设计，它会在屏幕边缘或指定位置悬浮，为用户提供诸如清理内存、查看网络状态等实用操作，且不影响主窗口的工作。 在IT开发中，实现浮动窗口功能涉及到以下几个关键知识点： 1. *...
在Android开发中，浮动按钮（Floating Action Button, FAB）、浮动窗口（Floating Window）和悬浮窗口（Floating Window）是常见的用户界面元素，用于提供便捷的操作入口或者实现特殊显示效果。以下将详细介绍这些...