[toc] ## 初衷 float初衷是为了实现文字环绕效果 为了实现这种效果，设置为float的元素会具备以下两个特性 - 父元素高度塌陷 - 行框盒子和浮动元素不会重叠（即使使用margin负值也是如此） >**注意：** 这里说的是行框盒子，而不是外部的块状盒子 > ## clear 首先，只有**块级元素**设置才有效 clear作用本质是让**自己**不和float元素在一行显示，而不是让浮动元素怎么怎么样。 并且设置了clear属性对后面的浮动元素是不闻不问的，**只会抗拒前面的**浮动元素。（注意float:left/right 方向不同时，所谓的的前后也是不一样的） 一般来说我们若是`float:left`，那么若要清楚浮动，使用`clear:left/both`，即左侧抗浮动；若是`float:right`，则使用`claer:right/both`，即右侧抗浮动。 最后clear并不是完全清楚了浮动，它只是解决了塌陷问题。 比如，用clear清楚浮动仍然会发生margin重叠 ## 形成"块"(BFC) ## 脱离文档流 和块级元素占位不冲突，不会撑开父级  (图1) ### 块级元素在前 上面是float元素在前的情况，如果是块级元素在前， 那么float元素表现和文档流中元素一样， 任然会在**下一行**才显示 ## 但不脱离文本流 ### 文本/span在后 文字环绕(如图1) ### 文本/span在前 浮动元素会如下表现： - 位置尽量靠上 - 在满足上一条规则的前提下，位置尽量靠左/右   在保证红色span不被挤到下一行的前提下，会尽可能的让位给浮动的绿色span(这也可理解为浮动元素的尽量考上特性)， 并且由于浮动元素尽量靠上，浮动元素在**一个行框盒子**中是可以和行级元素进行上下堆叠的(如果有空余位置)，就像上面的第二个绿色span ## 与margin负值 浮动元素的前面如果是一个块级元素，`margin-top`依然有效。 浮动元素的前面如果也是一个占满一行的浮动元素，那么，`margin-top`也依然有效， 且还有一个很有意思的现象，如果使用`margin-left`负值，达到一定程度，会发现浮动元素跑到上面一行的末尾去了 这其实就是浮动元素`尽量靠上、尽量靠左`特性的体现 如果感觉还是不是很好理解，我们再来个普通点的例子， 我们让前面的浮动元素不占一整行，  （是不是突然明白了点什么？道理其实是一样的，占据一整行只是比较特殊的一个栗子，但原理是一样的） ## 与flex 一个元素既可以作为flex项，又可以被浮动 flex相较于float的好处在于，flex既能让非行内元素变为行内元素，并且还不会失去其自适应性， 比如三个flex子项，一个左浮动，一个右浮动，剩下的那个将`flex`置为`1`，这样剩下的那个就会将flex容器剩下的空间撑满，也就是自适应