浮动 清除浮动(造成的影响)

Posted 2020-07-06 One Place

一、浮动

CSS浮动    CSS float浮动的深入研究、详解及拓展(一)    CSS浮动属性Float详解

块级元素独占一行

块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。

可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。

注意，以上这些理论，是指标准流中的div。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。

浮动

浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。

浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

显然标准流已经无法满足需求，这就要用到浮动。 浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

重要结论：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变(因为标准流中的块级元素是独占一行的)，也就是说A的顶部总是和上一个元素的底部对齐。

可以看出：

元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。

二、清除浮动（造成的影响）

清除浮动可以理解为打破横向排列。

清除浮动其实就一个目的，就是解决高度塌陷的问题。

为什么会高度塌陷？什么时候会高度塌陷？塌陷原因是：元素含有浮动属性 – 破坏inline box – 破坏line box高度 – 没有高度 – 塌陷。

什么时候会塌陷：当标签里面的元素没有实际高度时会塌陷。

清除浮动：

3.1    添加额外标签

浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可。

3.2    使用 br标签和其自身的 html属性

<br clear="all" />

3.3   父元素设置 overflow：hidden

 通过设置父元素overflow值设置为hidden(在支持BFC的浏览器触发BFC)；在IE6,IE7中还需要触发 hasLayout ，例如 zoom：1

3.4   父元素设置 overflow：auto 属性

　父元素设置 overflow：auto 属性(在支持BFC的浏览器触发BFC)　同样IE6,IE7需要触发hasLayout，

3.5  父元素也设置浮动

3.6  父元素设置display:table

3.7  使用 :after 伪元素

清除浮动两大类方法：

通过对比，我们不难发现，其实以上列举的方法，无非有两类：

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；

其二，触发BFC或haslayout：通过设置父元素 overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。（即触发BFC或haslayout）

after伪元素 清除浮动重点讲解

1 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
2 .clearfix { *zoom:1; }

1) display:block 使生成的元素以块级元素显示,占满剩余空间;

2) height:0 避免生成内容破坏原有布局的高度。

3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的content:"XXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；

5）zoom：1 触发IE hasLayout。

通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

精益求精方案一：

1 .clearfix:after {content:"\\200B"; display:block; height:0; clear:both; }
2 .clearfix { *zoom:1; /* IE6 IE7 触发hasLayout*/}.

相对于空标签闭合浮动的方法代码似乎还是有些冗余，通过查询发现Unicode字符里有一个“零宽度空格”，也就是U+200B ，这个字符本身是不可见的，所以我们完全可以省略掉 visibility:hidden了

精益求精方案二：

1 /* For modern browsers */
2 .cf:before,.cf:after {
3 content:"";
4 display:table;
5 }
6 .cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
7 .cf { zoom:1; }

上面的方法用到了 :before 伪元素，很多人对这个有些迷惑，到底我什么时候需要用 before 呢？为什么方案一没有呢？其实它是用来处理 margin 边距重叠的，由于内部元素 float 创建了BFC，导致内部元素的margin-top和 上一个盒子的 margin-bottom 发生叠加。如果这不是你所希望的，那么就可以加上 before，如果只是单纯的闭合浮动，after 就够了！