position属性和float属性——对文档流的影响和解决

position属性

定义和用法：
position属性用于指定一个元素在文档中的定位方式。
top,right,bottom,left属性则决定了该元素的最终位置。

参数

值	描述
absolute	生成绝对定位的元素，相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于根级容器定位
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位
relative	生成相对定位的元素，相对于其正常位置进行定位
static	默认值，没有定位，元素出现在正常流中 （忽略top,bottom,left,right或者z-index声明）
inherit	规定应该从父元素继承的position属性的值

文档流

• 内联元素默认从左到右，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局
• 块级元素单独占据一行，并按照从上到下的方式布局

脱离文档流

• 文档脱离文档流后，父元素的高度就不包括它了
• 脱离文档流的方法：float:left; position:absolute; position:fixed;

代码演示

基础模板如下：

<div class="parents">
	<div class="child1">小黑</div>
	<div class="child2">小红</div>
	<div class="child3">小绿</div>
</div>

.parents{
	border: 3px solid pink;
}
.parents>div{
	width:50px;
	height:30px;
}
.child1{
	border: 3px solid black;
	color:   black;
}
.child2{
	border: 3px solid red;
	color: red;
}
.child3{
	border: 3px solid green;
	color: green;
}

方式一：加float:left; 脱离文档流

.child1{
	/* 让小黑边框细一点，才能看到小红的边框 */
	border: 2px solid black;
	color: black;
	/* 添加: float: left; 让“小黑”脱离文档流 */
	float: left;
}

由上图可以看出：
“小黑”的样式加上：float:left，使它脱离了文档流；
导致父元素“小粉”的高度就不包括“小黑”的高度了（它现在的高度是“小红”+“小绿”的高度）
可怜的“小红”被挤到下面去了

方式二：加 position:absolute;脱离文档流

.child1{
	/* 让小黑边框细一点，才能看到小红的边框 */
	border: 2px solid black;
	color:   black;
	/* 添加: position:absolute 让“小黑”脱离文档流 */
	position: absolute; 
}

由上图可以看出：
“小黑”的样式加上：position: absolute;，使它脱离了文档流；
导致父元素“小粉”的高度就不包括“小黑”的高度了（它现在的高度是“小红”+“小绿”的高度）
“小黑”覆盖在了“小红”的身上

方式三：加 position:fixed;脱离文档流

.child1{
	/* 让小黑边框细一点，才能看到小红的边框 */
	border: 2px solid black;
	color: black;
	/* 添加: position: fixed; 让“小黑”脱离文档流 */
	position: fixed;
}

同理，如方式二的position:absolute;

脱离文档流方式总结：

• float:left; position:absolute; position:fixed; 都可使元素脱离文档流
• 有没有发现float:left; 脱离的不太彻底，“浮动的小黑”影响了“小红”，它并没有像position:absolute; position:fixed;一样，覆盖在“小红身上”
  
  浮动的目的：
  最初时，浮动只能用于图形（某些浏览器还支持表的浮动），目的就是为了允许其他内容（如文本）“围绕”该图像。后来，CSS才允许可以浮动任何元素；

绝对定位和浮动的区别：

• 绝对定位是将元素彻底从文档流中删除，并相对于其包含块定位；
  元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样，该元素也不会影响到其他元素的布局。
• 浮动，会以某种方式将浮动元素从文档的正常流中删除，并把元素向左或向右浮动，不过它还是会影响布局。
  如上图：
  “小黑”浮动后，脱离了文档流（“小红”占据了“小黑”原来的空间，看边框颜色！）
  但是“小红”里的文字并没有随之占据“小黑”的位置，而是环绕在浮动之后的“小黑”旁边。
  这就是为了避免“小黑”把“小红”里的文字给覆盖了，这就是浮动的目的

相对定位relative对文档流的影响

.child1{
	border: 3px solid black;
	color: black;
	position: relative;
	top:10px;
	left: 25px;
}

由上图可以看出：

• 相对定位relative并没有影响父元素的高度
  对元素进行相对定位，其父元素的真实空间位置还是原来的位置，只是肉眼看到的新位置相对于原来的位置进行移动，所占据的真实空间是不变的。

脱离文档流后，如何撑开父元素？

使用float后，想撑开父元素，可以给父元素创建BFC清除浮动；

给父元素创建BFC:

<div class="parents">
	<div class="child1">小黑</div>
</div>

.parents{
	border: 3px solid pink;
	/* 创建了BFC */
	overflow: hidden;  
}
.child1{
	width:50px;
	height:30px;
	border: 2px solid black;
	color: black;
	float: left;
}

使用overflow: hidden; 创建BFC的效果

使用display:inline-block;创建BFC的效果

推荐阅读：CSS 发生边距重叠了 怎么办？ 创建BFC吧

使用伪类来清除浮动（清除浮动的方式还有很多，自行搜索）

.parents{
	border: 3px solid pink;
	zoom:1;/*为了兼容IE*/
}
.parents:after{
	content:"";/*设置内容为空*/
	height:0;/*高度为0*/
	line-height:0;/*行高为0*/
	display:block;/*将文本转为块级元素*/
	visibility:hidden;/*将元素隐藏*/
	clear:both;/*清除浮动*/
}
.child1{
	width:50px;
	height:30px;
	border: 2px solid black;
	color: black;
	float: left;
}       

实现绝对定位后还能撑开父元素，只能通过JavaScript实现：

获取绝对定位的子元素高度，把它加在父元素的高度上（如有其它情况，JS做相应改动即可）
实现前：

实现后：

演示代码：

<div class="parents">
	<div class="child1">小黑</div>
</div>

.parents{
	border: 3px solid pink;
}
.child1{
	width:50px;
	height:30px;
	border: 2px solid black;
	color: black;
	position: absolute;
}

window.onload=function(){
	let h = document.getElementsByClassName("child1")[0].offsetHeight;
	let parents = document.getElementsByClassName("parents")[0];
	parents.style.height = h+'px'
}

最后：
具体问题，具体分析喽！