摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。
作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。
本文主要讨论以下几个问题：
1.浮动的原始用途
2.浮动为什么会有文本环绕效果
3.如何清理浮动造成的影响
以下内容来自张鑫旭大神的《CSS float浮动的深入研究、详解及拓展(一)》：
假设现在CSS中没有浮动(float)属性，那么会变成一个什么样子。我们会发现，目前流行采用浮动方法实现的无论是分栏布局，还是列表排列我们都可以用其他一些CSS属性（不考虑table）代替实现，唯一一个实现不了的就是“文字环绕图片”，我是想不出来能有什么方法可以让文字环绕图片显示。好，这个替代不了的作用才是float真正的意义所在。
总结起来一句话：实现文本环绕图片的效果。
浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象：
浮动的元素是脱离文档流的。
咦？你都脱离文档流了不是应该和下方未浮动的元素重叠吗，为什么文本还能环绕你呢？
这个问题一直困扰着我，直到我看到《精通CSS》这本书。文中写到：
浮动会让元素脱离文档流，不再影响不浮动的元素。实际上，并不完全如此。如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得像浮动根本不存在一样。但是，框的文本内容会受到浮动元素的影响，会移动以留出空间。
也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。这点与绝对定位的脱离文档流不一样。
知乎上张秋怡学姐的回答也印证了这一观点。
补充一点：文档流这个说法其实不准确，在W3C标准中，只有普通流(normal flow)，但是许多国内文章和翻译的书籍里用的都是文档流，久而久之大家就都用文档流的说法了。
如何清理浮动造成的影响其实浮动带来的影响主要是
1.元素脱离普通流造成的父元素高度塌陷
2.下方非文本元素与浮动元素重叠，破坏了原本布局
要清理这些影响，很多人都知道用clear属性,为什么clear能清除浮动呢？
有两种说法：
1.浏览器在设置clear元素的顶上添加足够多的外边距，使元素上边框边界垂直下降到浮动元素下外边距的下面。
2.在设置clear元素的上外边距之上增加清除空间，而外边距本身不改变。
前者是CSS1和CSS2的实现原理，后者是CSS2.1的实现原理。但无论哪种都达到了给浮动的元素留出了垂直空间，看上去清除了浮动的效果。同时，在设置clear元素之上填充的空间是实际存在于普通流中的。因此，父元素高度被撑开了。
关于清除浮动，其实还有许多方法。在《那些年我们一起清除过的浮动》这篇文章里，将清除浮动的方法简单分为两类：
1.通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
2.通过设置父元素 overflow 或者display：table 属性来闭合浮动。
几乎所有清除浮动的方法都可以归纳到这两类中，这里结合上面的博文谈一谈，添加伪元素的方法：
1.display: block，使生成的元素以块级元素显示，占满剩余空间。
2.在content中添加一个点，因为这个字符非常小。
3.设置height为0，因为不希望这个新的内容占据空间破坏布局高度。
4.将visibility设置为hidden，使生成的内容不可见，允许可能被生成的内容盖住的部分可以点击和交互。
5.clear: both清理浮动的影响
代码如下：
.clearfix:after {
display: block;
content: ".";
height: 0;
visibility: hidden;
clear: both;
}
这种方法在大多数现代浏览器中都是有效的，也是比较推荐的。至于其他方法网上有很多，这里就不详细讲了。
本文借鉴了部分其他博客与文档，附上链接：
参考链接：
CSS clear属性
CSS 浮动
理解CSS浮动与清除浮动
那些年我们一起清除过的浮动
noraml flow
CSS float浮动的深入研究、详解及拓展(一)
张秋怡的回答
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50661.html
摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。 作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。 本文主要讨论以下几个问题：1.浮动的原始用途...
摘要：生成相对定位的元素，相对于元素本身正常位置进行定位。元素的位置通过以及属性进行规定。因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过属性控制叠放顺序，越高，元素位置越靠上。页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Maste...
摘要：浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，相当于不占用空间，所以文档的普通流中的块框表现得就像浮动框不存在一样。 CSS浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，相当于不占用空间，所以文档的普通流中的块框表现得就像浮动框不存在一样。 CSS ...
摘要：不会重叠浮动元素可以包含浮动我们可以利用的第三条特性来清浮动，这里其实说清浮动已经不再合适，应该说包含浮动。总而言之清理浮动两种方式利用属性，清除浮动使父容器形成 CSS清浮动处理（Clear与BFC）在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼 1 浮动带来布局的便利，却也带来了新问题 复制代码 1 2 3 4 ...
摘要：时其宽度始终保持占满宽度的态度。清除浮动就是为浮动影响的范围划边界。那么可归结为的父容器包裹所有子元素。注意属性值不能为空白，否则无法清除浮动。 前言 定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征，若有纰漏望各位指正...
阅读 814·2023-04-26 02:26
阅读 1852·2021-09-26 10:16
阅读 1309·2019-08-30 12:57
阅读 3307·2019-08-29 16:10
阅读 3018·2019-08-29 13:47
阅读 993·2019-08-29 13:12
阅读 1974·2019-08-29 11:11
阅读 1187·2019-08-26 13:28
