关键词：
float内容比较多，咱们分上、下两篇来介绍，上篇已经写完，这是下篇。建议大家先把上篇看了，再来看下文，精彩内容不要掠过啊。
1. 清除float
《上篇》中我们提到，float具有“破坏性”，它会导致父元素“坍塌”，这将不是所要看到的。如何去避免float带来的这种影响呢（也就是我们常说的“清除浮动”） ？方法有很多种，我在这里介绍4中供大家参考，大家可根据实际情况来选择。
先介绍两个比较简单，但是不常用的解决方法：
- 为父元素添加overflow:hidden
- 浮动父元素
这两个方法比较简单，在这里也就不再演示了，大家有兴趣的可以自己去试试。
第三种方法也不是很常用，但是大家要知道clear:both这个东西。通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。
接下来的第四种方法是大家最需要掌握的，也是我推荐的，也是bootstrap正在用的——clearfix——不知道的同学一定要去搜一下，要不然就太low了！
上图中，我们定义一个.clearfix类，然后对float元素的父元素应用这一样式即可，非常简单吧？注意，你可能会搜出不同版本的clearfix，有的代码比上图中的代码多，你不用理会它，就按照我的贴图的代码写就行。
究其原理，其实就是通过伪元素选择器，在div后面增加了一个clear:both的元素，跟第三种方法是一个道理。
2. 合理的使用float布局网页
《上篇》中提到，我们使用float做网页布局，是一种误解和“误用”。估计大多数人误解了float的原本设计初衷，但是这里的“误用”是要加引号的，因为这是一种无心插柳的应用。即，用float做网页布局是很合情合理的，鼓励同志们继续使用。
但是用float做网页布局也是有许多技巧的，准确的应用会提高网页的灵活性。下面我列举两个常用的网页布局案例，仅供大家参考，不喜勿喷，善意留言！
第一，三列布局
博客园的主页就是经典的三列布局，很明显的左、中、右。
对于这种布局，我给出的布局方案是：
第二，两列布局
以博客园一篇文章的链接为例，它分为左、右结构
对于这种布局的格式，我的设计方案是：
3. BootStrap的栅格系统
如果您熟悉并使用bootstrap，那么您将不必自己去操心网页布局，因为bootstrap已经把网页分成了12列，您可以随意设置多列布局，非常方便。这就是bootstrap的栅格系统。此处不会详解栅格系统，就是简单看看栅格系统的实现，它是用float实现的。
通过浏览器监控每个单元格的css样式，可以发现，单元格通过百分比设置了宽度，通过float:left设置了浮动。
对于父元素的清除浮动，bootstrap使用的就是《上篇》中说的clearfix，大家可以自行检测一下试试。
多看看经典软件的源码是学习的一个捷径，学习css可以看看bootstrap，学习js可以看看jquery……
4. 总结
float内容非常多，有的css书籍中，也很难全面的讲解float这一知识点的全部内容。这就需要自己去多多看书，多多实践，多多看经典系统的源码，才能做到融会贯通，举一反十。
大家共勉吧。
---------------------------------------------------------------
本系列的目录页面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html
-------------------------------------------------------------------------------------------------------------
欢迎关注我的教程：
《用grunt搭建自动化的web前端开发环境》《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》
也欢迎关注我的开源项目——wangEditor，简洁易用的web富文本编辑器
css知多少——选择器的优先级（转）
1.引言 上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说明。 上图中，css中的两个选择器都是针对<span>的，而且两个设置的颜色不一样，这里的... 查看详情
css知多少（10）——display（转）
1.引言 网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。在本系列一开始讲《浏览器默认样式》的时候，大家也都看到了浏览器默认样式中规定了html元素哪些... 查看详情
转：css知多少——我来问你来答
1.引言 各位前端或者伪前端（比如作者本人）的同志们，css对你们来说不是很陌生。比如我，在几年之前上大学的时候，给外面做网站就用css，而且必须用css。这样算下来也得六年多了，有些功能可能轻车熟路，有些功能可... 查看详情
overflow知多少（转）
最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：12.bodyoverflow:hidden;_overflow:visible;_zoom:1;.mainoverflow:hidden;_overflow:visible;_zoo 查看详情
[转]梦里babel知多少(代码片段)
平时开发中，经常需要用到ES6/ES7的语法。那么就需要用到Babel来对代码进行转码处理。 之前用Vue比较多，所以以Vue-cli作为参考来分析。 第一张图是几个月前的Vue-cli生成的 第二个图是今天使用Vue-cli生成的Babel-core顾... 查看详情
css知多少（11）——position
1.引言 本文将用一篇文章介绍position（定位），在学习position之前，我们应该去思考一个问题：什么情况下我们需要定位？如果没有定位将无法满足我们怎样的需求？我们要知道，被人类创造出来的每一个知识，都有它的用途... 查看详情
九种浏览器端缓存机制知多少（转）
浏览器缓存（BrowserCaching）是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。浏览器端缓存的机制种类较多... 查看详情
overflow知多少
本文地址: http://www.hicss.net/some-overflow-knowledge/最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：12.body{overflow:hidden;_overflow:visible;_zoom:1;}.main{overflo 查看详情
css知识体系你知多少？（前端技术）
1、有些浏览器不完全支持css3，现在可以用哪个工具去检测浏览器是否支持，以及支持哪些项？modernizr:检测浏览器对HTML5和CSS3特性（至于modernizr的介绍，可以看我另外一篇博文HTML5系列四（特征检测、Moderni... 查看详情
css知识体系你知多少？（前端技术）
1、有些浏览器不完全支持css3，现在可以用哪个工具去检测浏览器是否支持，以及支持哪些项？modernizr:检测浏览器对HTML5和CSS3特性（至于modernizr的介绍，可以看我另外一篇博文HTML5系列四（特征检测、Moderni... 查看详情
css选择器优先级（转）
...//www.w3.org/TR/css3-selectors/#specificity1.引言 上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说 查看详情
试图运行for循环，被告知'float'对象不可迭代
】试图运行for循环，被告知\\\'float\\\'对象不可迭代【英文标题】：Tryingtorunfor-loop,beingtoldthat\'float\'objectisnotiterable试图运行for循环，被告知\'float\'对象不可迭代【发布时间】：2014-01-0416:30:25【问题描述】：我正在尝试进行一些分... 查看详情
[转]经验分享：css浮动(float,clear)通俗讲解
原文地址：http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html写在前面的话： 由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。 如果读者理解CSS盒子... 查看详情
事件总线知多少
ImplementinganeventbuswithRabbitMQforthedevelopmentortestenvironmentAbpEventBus 查看详情
事件总线知多少
ImplementinganeventbuswithRabbitMQforthedevelopmentortestenvironmentAbpEventBus 查看详情
国内最火的htmlcssjavascript开源项目top榜，你知多少？
对于开发者而言，想要着手前端开发，HTML、CSS和JavaScript是三项必备的基础技能。而如何事半功倍地掌握好这些知识？通过了解当下火热的开源项目不乏为最佳学习姿势。本文盘点国内评分最高且收藏量超过100的前端技术开源项... 查看详情
网页制作知多少
网页制作知多少一、通用模板：<!DOCTYPEhtml><htmllang=”en”> <head> <meta charset=”UTF-8”/> &nb 查看详情
jvm进阶之字节码指令解析(下篇)(代码片段)
字节码指令解析下篇一、控制转移指令1.比较指令2.条件跳转指令3.比较条件跳转指令4.多条件分支跳转指令5.无条件跳转指令二、异常处理指令1.异常抛出指令2.异常处理指令三、同步控制指令1.方法级的同步2.方法内指令序列的同... 查看详情