元素脱离普通文档流后特点及问题总结

在使用float，position：absolute | fixed属性之后元素会脱离普通文档流，与inline-block和position：relative不同，后两者还在普通文档流中。

对于行内元素来说，允许行内元素使用原本不能使用的width，height，margin-top，margin-bottom，padding-top，padding-bottom属性。

元素脱离普通文档流后其他元素定位会将其视为不存在，尤其是对于没有设置高度且所有子元素脱离后的父元素，父元素高度将变为0

红色浮动前 红色浮动后，绿色div高度为0消失

*{margin: 0;padding: 0;}
.content{width: 100px;background: green;}
.float{width: 50px;height: 50px;background: red;}

.float{float: left;}
.test{width: 100px;height: 100px;background: yellow;}

<div class="content">
	<div class="float"></div>
</div>
<div class="test"></div>

怎么解决这种问题呢？

1.给外层content设置高度，但是这种方法很死板，并不好用

2.在content父元素中加入.content{overflow: hidden;}

3.在所有浮动元素后面加入<div style="clear: both;">

如

<div class="float"></div>
<div style="clear: both;"></div>

上面三种方法都可以让消失的父元素重新定位。