CSS--浮动元素

虽然css浮动是每个fe都认为烂熟于心的知识点，但很多小细节都容易忽略。本文将复习css的浮动元素，主要讲解浮动元素的概念，特点，以及如何消除浮动。以4个demo来理解浮动元素的特点。

浮动float
浮动元素是指元素脱离了常规流，向左/右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

float有四种值

• none : 默认值, 不浮动
• right: 向右浮动
• left : 向左浮动
• inherit: 继承父元素的float值, IE不支持

刚才说到浮动框会脱离常规流(normal flow), 所以它会影响到内联框的排列, 但不会影响到块级框。
这是因为, 在布局浮动元素时, 一旦普通流中出现了浮动元素, 一个框盒首先根据常规流来布局, 然后脱离常规流, 向左/右移动。这导致沿着它边上的文本content都将"浮动"。 即, 其它盒子看不到被float的盒子, 但其它盒子中的文本却能看到它。

划重点：
1、沿着浮动元素边上的文本content都将"浮动"。
2、其它非浮动盒子看不到被浮动的盒子, 但其它未盒子中的文本却能看到它。

接下来我们将用两个demo解释这两个重点

demo1

	// 两个子块级元素的样式
	.test{
	    width: 100%;
	    .test1, .test2{
	        height: 100px;
	    }
	    .test1{
	        width: 100px;
	        background: greenyellow;
	    }
	    .test2{
	        width: 100px;
	        background: blueviolet;
	    }
	}
	// 浮动 
	.fl {
		float: left;
	}

	<div className="test">
		// 浮动元素在上面
		<div className="test1 fl">i m test1</div>
		// 块元素在下面
        <div className="test2">i m test2</div>
	</div>

想象一下运行上述代码，两个子块级元素会如何布局呢？我们都认为test1浮动后，test2会跟着漂浮在test1左边，这是错误的哦~要记住，实际上：未加.fl类的test1(绿块)，将排在上面，
test2(紫块)垂直方向排在下面。test1添加.fl类变为浮动元素后，紫块看不见了，只能看到紫块中的文字排在绿块下面。


如何理解这样的现象呢？test2为什么不见了？
首先排在前面的test1浮动后，脱离文档流，test2就会被安排在原本test1所在的位置，并且test1浮动遮挡在了test2上方，由于test1和test2等宽，test2被挡的严严实实，还以为我们的test2不见了呢，那为什么文字还留在下方呢？这个效果解释了上面的重点2：其它非浮动盒子看不到被浮动的盒子, 但其它未盒子中的文本却能看到它。
正是由于test2中的文本可以看到test1元素，所以文字仍然留在了下面。

demo2:

	// 两个子块级元素的样式
	.test{
	    width: 100%;
	    .test1, .test2{
	        height: 100px;
	    }
	    .test1{
	        width: 100px;
	        background: greenyellow;
	    }
	    .test2{
	        width: 100px;
	        background: blueviolet;
	    }
	}
	// 浮动 
	.fl {
		float: left;
	}

	<div className="test">
		// 浮动元素在上面
		<div className="test1 fl">i m test1</div>hello
		// 块元素在下面
        <div className="test2">i m test2</div>
	</div>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200120113315770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE5NjcwMA==,size_16,color_FFFFFF,t_70

以上我们在第一个子元素加了浮动，再来看看在第二个子元素上会有什么效果。

demo3

	// 两个子块级元素的样式
	.test{
	    width: 100%;
	    .test1, .test2{
	        height: 100px;
	    }
	    .test1{
	        width: 100px;
	        background: greenyellow;
	    }
	    .test2{
	        width: 100px;
	        background: blueviolet;
	    }
	}
	// 浮动 
	.fl {
		float: left;
	}

	<div className="test">
		// 浮动元素在上面
		<div className="test1">i m test1</div>hello
		// 块元素在下面
        <div className="test2 fl">i m test2</div>
	</div>

如图所示，沿着浮动元素边上文字也浮动，它排在了test2浮动元素的后面，似乎所有inline元素，浮动元素边上的文本都会浮动在浮动元素后面，不管它们之前是排在浮动元素前还是浮动元素后，test2对test1的位置没有影响，可见浮动元素自己脱离文档流，但不会影响在它们前面的块级元素，还需要注意的一点是，两个框的父级元素的墨兰色边框回缩了，这是因为test2浮动后，引起了高度塌陷，test2不再有高度支撑父元素的高度。高度塌陷也是浮动元素的一大特点，它需要清除浮动来解决高度塌陷的问题。

总结：

1. 浮动元素沿边的文字会跟着浮动，并且排在浮动元素的后面
2. 浮动元素对它前面的块级元素没有位置影响
3. 浮动元素会引起父级元素的高度塌陷

demo4

	// 两个子块级元素的样式
	.test{
	    width: 100%;
	    .test1, .test2{
	        height: 100px;
	    }
	    .test1{
	        width: 100px;
	        background: greenyellow;
	    }
	    .test2{
	        width: 100px;
	        background: blueviolet;
	    }
	}
	// 浮动 
	.fl {
		float: left;
	}

	<div className="test">
		// 浮动元素在上面
		<div className="test1 fl">i m test1</div>hello
		// 块元素在下面
        <div className="test2 fl">i m test2</div>
	</div>

这种情况是我们最为常见的情况，都是浮动元素，依次向左排开，这个demo中最为明显的就是浮动的高度塌陷。

执行完四个demo的延伸总结：
1、test1浮动，test2不浮动：test2被覆盖，test2中的文字留在原处。
2、test1浮动，test2不浮动：test2中的文字被标签包裹，这是文字和test2一起被test1覆盖。
3、test1浮动，test2不浮动：两块元素中的文本跟着浮动，且没标签包裹的文本content，是块级元素哦，文本后的test2折行排在后面
4、test1不浮动，test2浮动：中间的文本飘在test2右边，test1不变
5、test1浮动，test2浮动：左右排开，有高度塌陷

浮动的情况还有很多种，这里只总结5种，帮助体会浮动元素的特点。
接下来介绍高度塌陷和清除浮动。

高度塌陷
浮动有一个很大的副作用, 就是当浮动框高度超出容器框的时候, 容器不会自动升高来闭合浮动元素, 这被称为容器的高度塌陷现象。

清除浮动

最佳实践 | after法

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

::after是伪元素, 它只对块级元素有效.
display:block, 使生成的元素以块级元素显示, 占满剩余空间
visibility:hidden, 隐藏content
height:0, 避免生成内容破坏原有布局的高度
zoom:1, 触发IE的hasLayout, 后者相当于是IE中的BFC机制
这本质上是一个空div法的变形, 但更符合语义和结构.

overflow*
通过设置父元素overflow值设置为hidden; 在IE6中还需要触发 hasLayout , 例如 zoom:1
优点: 不存在结构和语义化问题, 代码量极少
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉, 无法显示需要溢出的元素; 04年POPO就发现overflow:hidden会导致中键失效
或者设置为overflow:auto
缺点: 多个嵌套后, firefox某些情况会造成内容全选; IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等, firefox早期版本会无故产生focus等

父元素也设置浮动
优点: 不存在结构和语义化问题, 代码量极少
缺点: 使得与父元素相邻的元素的布局会受到影响, 不可能一直浮动到body, 不推荐使用

父元素设置display:table
优点: 结构语义化完全正确, 代码量极少
缺点: 盒模型属性已经改变, 由此造成的一系列问题, 得不偿失, 不推荐使用