摘要：导致这一现象的最根本原因在于被设置了的元素会脱离文档流。脱离文档流可以理解为子元素与父元素间的结构被破坏，父子关系解除。
1.引言
对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。
这就是我们又爱又恨的——float。所以，系统的学一学float是非常非常有必要的。视频学习可参考张鑫旭的《CSS深入理解之float浮动》，讲的很好很透彻。
这里说的“误用”并不是真正的误用，而是误打误撞使用之后，带来了真正的效果。
绝大多数人用float都是为了——横向排版或者多列布局。这样的使用是正确的，大部分人都这样使用，bootstrap的栅格系统也是使用了float来实现的，并且在css3被普及之前，多列布局的最佳解决方案也是使用float——要不然你就用table，或display:table-cell。
但是，这样使用确实是对float的一种误解和“误用”，因为float被设计出来的初衷是用于——文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。
但是，当时的多列布局和横向排版主要是依靠table实现，后来人们见见的发现，使用table将导致代码量大、混乱、不利于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.3 包裹性如上图，普通的div如果没有设置宽度，它会撑满整个屏幕。而如果给div增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容“Phone”包裹了——这就是包裹性。div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。
注意，此时div虽然体现了包裹性，但是它的display样式是没有变化的，还是block。
float为什么要具有包裹性？其实答案还得从float的设计初衷来寻找，float是被设计用于实现文字环绕效果的。文字环绕图片比较好理解，但是如果想要让文字环绕一个div呢？此时div不被“包裹”起来，那么如何去实现环绕效果？
2.4 清除空格上图中。第一个例子，正常的img中间是会有空格的，因为多个标签会有换行，而浏览器识别换行为空格，这也是很正常的。第二个例子中，img增加了float:left的样式，这就使得img之间没有了空格，四个img紧紧挨着。
“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。
float具有“破坏性”，它会导致父元素“坍塌”，这不我们所期望的。如何去避免float带来的这种影响呢（也就是我们常说的“清除浮动”） ？方法有很多种，我在这里介绍4中供大家参考，大家可根据实际情况来选择。
两种简单但不常用的方法：
1.为父元素添加overflow:hidden;
2.浮动父元素
第三种方法clear:borth，不是很常用，但是大家要知道。通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。
注意：也可以添加在父div闭合元素下边，这样即是第四种方法的实现原理。
第四种方法是大家最需要掌握的，也是Bootstrap正在用的——clearfix
上图中，我们定义一个.clearfix(只是个类名，可以随意定义)类，然后对float元素的父元素应用这一样式即可。究其原理，其实就是通过伪元素选择器，在div后面增加了一个clear:both的元素，跟第三种方法是一个道理。
清除浮动四种方法可概括为：
4.合理使用float布局网页估计大多数人误解了float的原本设计初衷，但是这里的“误用”是要加引号的，因为这是一种无心插柳的应用。即，用float做网页布局是很合情合理的，鼓励同志们继续使用。
下面我列举两个常用的网页布局案例，仅供大家参考，不喜勿喷，善意留言！
博客园的主页就是经典的三列布局，很明显的左、中、右。
对于这种布局，方案是：
注：float的包裹性，使得元素宽度不可设置，但是可通过内部的元素宽度来撑开float元素。
第二，两列布局以博客园一篇文章的链接为例，它分为左、右结构
对于这种布局的格式，方案是：
w.imooc.com/learn/121
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112112.html
摘要：本系列文章重拾主要参考王福朋知多少，结合自己的理解和学习需要，修改或添加了一些内容，难免有失偏颇，仅供自我学习参考之用。 工作中或多或少的写一些css，但总感觉掌握的不够扎实，时而需要查阅一下知识点。我想，一方面跟缺少科班出身式的系统学习有关，另一方面也苦于一直未寻觅到一套合我胃口教程。直到我读到了王福朋css知多少系列文章，使我有了重新系统学习css的想法。 本系列文章（重拾css）...
摘要：来不及解释，快上车有些浏览器不完全支持，现在可以用哪个工具去检测浏览器是否支持，以及支持哪些项常用的标签，它们的属性一般默认为和。的设计初衷是什么具有包裹性例如和两者的宽度是不一样的，不信可以为加上背景色试试。 来不及解释，快上车... ... 有些浏览器不完全支持css3，现在可以用哪个工具去检测浏览器是否支持，以及支持哪些项？ 常用的html标签，它们的display属性一般默认...
摘要：浏览器默认样式中规定了元素哪些属于块剩下的就是流。上图可知，针对的标签，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是，并不是我们设定的值。因此，的特点可以总结为外部看来是流，但是自身却是一个块。 1.引言 html元素，除了块就是流（即平时常说的块级元素和行内元素），而且流都包含在块中，例如body就是一个块，而a就是一个流。浏览器默认样式中规定了html元素...
摘要：撸代码实现首页检验单查询成品通用标准审核圆角的何止是啊上图的变成椭圆形了，而且中的文字好像飘到外面。我们可以看到两边相交所形成的矩形的对角线，将作为边的相交点。 前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right...
摘要：和不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。的绝对定位元素的定位永远是相对于浏览器边界的，和其他元素没有关系。 1.引言 在学习position之前，我们应该去思考一个问题：什么情况下我们需要定位？如果没有定位将无法满足我们怎样的需求？我们要知道，被人类创造出来的每一个知识，都有它的用途，都要解决一些之前遇到的问题。 如果没有定位，我...
阅读 1034·2023-04-25 17:51
阅读 2851·2021-11-23 09:51
阅读 1469·2021-11-08 13:21
阅读 2428·2021-09-22 15:14
阅读 1512·2019-08-30 12:48
阅读 1075·2019-08-29 12:44
阅读 1135·2019-08-26 12:21
阅读 1395·2019-08-26 10:47
