CSS利用浮动让元素脱离标准文档流

正文索引 [隐藏]

首先解释下,CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。而浮动是CSS中用到的很多的一个选项,他有三个性质。关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动。

浮动元素脱离标准文档流

例子:有两个盒子,一个盒子浮动,一个盒子不浮动。浮动的盒子会脱离标准文档流,不浮动的盒子会在标准文档流中成为第一个,所以两者出现覆盖现象。
描述:一个行内标签在标准文档流中是不能设置宽高的,但是使用float使其脱离文档流之后,就可以对其设置宽高了。所有浮动的标签不会去区分行内标签和块级标签。也就是说:一旦一个元素浮动了,那么,将能够并排了,并且能够设置宽高了。无论它原来是个div还是个span。

浮动的元素互相贴靠

例子:以float向左浮动为例:有3个div,如果有足够空间,那么3号div就会靠着2号div。如果没有足够的空间,那么3号div会靠着1号div。如果没有足够的空间靠着1号大哥,自己去贴最左侧。

浮动元素有“自围”的效果

自围效果就是:浮动的盒子可以遮盖文档标准流的第一个盒子,但是不会遮盖里面的文字,文字会围绕浮动的盒子显示。在CSS代码中让div浮动,p不浮动,那么p中的文字就睡形成这种自围效果。

另外,我们还可以利用绝对定位固定定位父子关系(儿子就是占用父亲内容的宽高,和父亲的padding没有关系)来使得元素脱离标准文档流。

参考文章:CSS的三种手段让元素脱离标准本文档流