作为前端，写过很多页面布局，但是浮动一直是我看不懂的盲区。浮动一方面可以实现很多布局，另一方面浮动的冲击会破坏布局。很头疼，所以今天写了一篇博文来解决这个盲点。本文主要讨论以下几个问题：1.浮动的最初目的2.浮动为什么会有文字环绕效果3.如何清理浮动带来的影响Float（浮动）属性，那么它会是什么样子。我们会发现，无论是栏目布局，还是目前流行的浮动方式实现的列表排列，我们都可以使用一些其他的CSS属性（不管表格）来代替。唯一不能实现的就是“文字环绕图片”。我想不出任何方法让文字环绕图片。嗯，这个不可替代的作用，才是float的真正含义。一句话总结：实现文字环绕图片的效果。浮动为什么有文字环绕效果的问题主要来自于之前的印象：浮动元素是从文档流中分离出来的。嗯？你在文档流之外，不应该和下面未浮动的元素重叠吗，为什么文字还围着你呢？这个问题一直困扰着我，直到看到《精通CSS》这本书。文字如下：浮动将元素从文档流中移除，不再影响非浮动元素。实际上，不完全是。如果浮动元素后面的文档流中有一个元素，则该元素的框将表现得好像浮动根本不存在一样。但是，框的文本内容受浮动元素的影响，移动以腾出空间。也就是说，浮动元素确实会脱离文档流，因此文档流中的块框会忽略浮动元素，但文本不会。这与文档流之外的绝对定位不同。张秋仪在知乎上的回答也印证了这个观点。还有一点：文档流这个词其实并不准确。在W3C标准中，只有normalflow（正常流），但国内很多文章和翻译书籍都使用文档流。随着时间的推移，每个人都使用术语文档流。.如何清理浮动的影响其实浮动的影响主要是1、元素脱离正常流动导致父元素高度塌陷2、下面的非文本元素与浮动元素重叠，破坏原有布局。清除这些效果，很多人都知道有了clear属性，为什么clear就可以清除float呢？有两个参数：1.浏览器在透明元素的顶部添加了足够的边距，使元素的上边框垂直落在浮动元素的下边距下方。2.增加setclear元素上margin上方的clearspace，而margin本身没有变化。前者是CSS1和CSS2的实现原理，后者是CSS2.1的实现原理。但是无论哪一个都实现了浮动元素的竖向空间，似乎清除了浮动的效果。同时，设置清除元素上方填充的空间是正常流中实际存在的空间。因此，父元素的高度被拉伸了。清除浮动的方法其实有很多。在本文《那些年我们一起清除过的浮动》中，简单的将清除浮动的方法分为两类：1.通过在浮动元素的末尾添加一个空元素，并设置clear:both属性，after伪元素其实是在float后面element通过content生成内容为点的块级元素；2.通过设置父元素的overflow或display:table属性来关闭浮动。几乎所有清除浮动的方法都可以归为这两类。下面结合上面的博文说说吧。添加伪元素的方法：1.display:block，使生成的元素显示为块级元素，占用剩余空间。2.在内容中加一个点，因为这个字很小。3.设置height为0，因为你不想让这个新内容占用空间，破坏布局高度。4.设置visibility为hidden，使生成内容不可见，让生成内容可能覆盖的部分可以点击和交互。5.clear: both清除浮动效果的代码如下：.clearfix:after{display:block;内容：”。”;高度：0；可见性：隐藏；clear:both;}这个方法在大多数现代浏览器中都有效，推荐使用。网上还有很多其他的方法，这里就不赘述了。本文借鉴了其他一些博客和文档，附上链接：参考链接：CSSclearattributeCSSfloat理解CSSfloat和清除float那些年我们一起清除的floatnoramlflowCSSfloat的深入研究，详解和扩展浮点数（一）张秋仪答案
