css脱离文档流html元素位置控制

举个简单的例子，脱离文档流就相比我们上学时，将户口迁移到学校，家乡没有留我们的户口和位置。

没有脱离文档流就相当于，我们虽然走了，但是我们的户口和位置还在原来的户籍所在地。

html页面元素类似，没有脱离文档流的元素会按原来的块级元素、行内元素来进行排列划分。

脱离文档流的元素排列就不受原来的划分规则制约。

脱离文档流通常会伴随元素位置定位而出现。

 

今天我们先了解一下脱离文档流

后面再说说元素定位

这样就可以一起理解，交叉使用了。

 

1.脱离文档流

01.float，float设置left/right后，改元素会脱离文档流。（但有时候我们想设置float属性，又不想使其脱离文档流，后面会有介绍）

这里拓展一下，float有时还不如display：flex好用。总结我用的不多

02.position，脱离文档流有absolute和fixed。

 

2.脱硫文档流的后果

元素脱离文档流后，如果父级没有设置高、宽，父级就会坍塌。如图

元素脱离文档流后，其位置就会让给没有脱离文档流的元素。如图

元素脱离文档流后DOM操作不变。

 

3.脱离文档流常常是因为元素定位的需求，下一篇讨论元素定位，元素定位有何元素对齐有相互关系。