1。简介对于我们所有的web前端开发者来说，float是或者曾经是你最熟悉的陌生人——你离不开它，却整天忍受着它给你带来的各种痛苦，你以为它是很简单，有点知识，但你无法控制它的各种奇怪现象。这就是我们又爱又恨的东西——漂浮。因此，系统地学习浮漂是非常非常有必要的。视频学习可以参考张新旭的《CSS深入理解之float浮动》，非常好，很透彻。2、重新认识float2.1的误区和“误用”这里所说的“误用”不是真正的误用，而是误用后的真实效果。大多数人使用float是出于横向排版或多栏布局的目的。这个用法是对的，大部分人都是这样用的，bootstrap的网格系统也是用float实现的，而在css3普及之前，多列布局最好的方案就是用float——不然你就用table，或者display：表格单元格。但是，这样的使用确实是对float的一种误解和“误用”，因为float的设计初衷就是为了——文字环绕效果。即一张图片和一段文字，图片float:left后，文字会环绕图片。不过当时的多栏布局和横向排版主要是通过表格来实现的。后来人们发现使用表格会导致代码量大，混乱，不利于SEO。然后他们发现float+div是一个非常好的排版方案。,于是乎——“css+div”页面布局成为这几年的热门话题，也是各个大学面试题的必考项目。如果你只知道float是用来排版的，而不知道float的很多特性，就会导致你在使用float的时候遇到很多问题。如果你不相信我，请阅读下文。2.2破坏性首先我们来看两个demo，如下图。第一个demo是一个简单的例子，显示效果正常。在第二个demo中，唯一不同的是添加了float:left，但是上层的
出现了“塌陷”的现象。这就是float的“破坏性”——float破坏了父标签原有的结构，导致父标签崩溃。造成这种现象最根本的原因是设置为float的元素会脱离文档流。“脱离文档流”可以理解为子元素与父元素之间的DOM结构被破坏，父子关系终止。但是，千万不要忘记设计float的初衷是为了实现文字的环绕效果。当div中有文字时，文字仍会包围img，“塌陷”现象消失。如下图所示：那么，float为什么要设计成破坏性的，为什么要脱离文档流呢？这一点很重要！其实原因很简单——为了实现文字的环绕效果！如果float不允许父元素折叠：折叠脱离文档流后：2.3Wrapping属性如上图所示，如果一个普通的div没有设置宽度，它会填满整个屏幕。而如果给div加上float:left，突然变紧凑了，宽度变了，内容“Phone”被包裹起来——这就是wrapping属性。div设置为浮动后，其宽度会自动调整为包裹内容的宽度，而不是填满整个父容器。注意，此时div虽然体现了wrapping，但是它的显示风格并没有改变，依然是一个block。为什么要包裹浮动？其实还得从float的设计初衷去寻找答案。float是为了实现文字环绕效果而设计的。图片周围的文字更容易理解，但是如果你想让文字环绕一个div怎么办？这时候div并没有被“包裹”，那么如何实现包裹效果呢？2.4清除上图中的空格。第一个例子，一个普通的img中间会有空格，因为多个![]()
标签都会有换行符，浏览器将换行符识别为空格是正常的。第二个例子，img添加了float:left的样式，使得img之间没有空格，四个img相邻。“空位”特性的根本原因是浮动会导致节点脱离文档流结构。它不属于文档流结构，所以它周围的换行和空格与它无关，它会尽量靠近一侧，尽可能靠近，这就是清理空格的本质。3、清除浮动（clearfloat）浮动是“破坏性的”，它会导致父元素“崩溃”，这不是我们所期望的。如何避免这种浮动带来的影响（也就是我们常说的“清浮动”）？方法有很多，这里介绍4种，供大家参考，大家可以根据实际情况选择。两种简单但不常用的方法：1、在父元素上添加overflow:hidden；2.浮动父元素。第三种方法，clear:borth，不是很常用，但是大家应该都知道。可以通过在所有浮动元素下方添加一个clear:both元素来消除浮动的破坏性。注意：也可以在父div的关闭元素下添加，即第四种方法的实现原理。第四种方法是大家最需要掌握的，也是Bootstrap正在使用的——clearfix在上图中，我们定义了一个.clearfix（只是一个类名，可以随意定义）类，然后应用同父元素的float元素公式即可。其原理其实就是通过伪元素选择器在div后面添加一个clear:both元素，与第三种方法相同。清除浮动的四种方法可以归纳如下：4、合理使用浮动布局网页估计大部分人都误解了浮动的设计初衷，但是这里的“误用”还是要引用一下，因为它是一个无意的应用程序。即网页布局使用float是非常合理的，鼓励同志们继续使用。下面我列举两个常用的网页布局案例，仅供大家参考，不喜勿喷，请留言！一、三栏布局博客园的首页是经典的三栏布局，左中右明显。对于这种布局，解决方案是：注意：float的包裹使得元素宽度不可设置，但是float元素可以通过内部元素宽度进行拉伸。二、双栏布局以博客园某篇文章的链接为例。它分为左结构和右结构。对于这个layout的格式，scheme是：w.imooc.com/learn/121