少年，请不要轻视浮动，定位，布局（盒模型，flex，grid）

请不要轻视浮动，定位，布局（盒模型，flex，grid）"/>

少年，请不要轻视浮动，定位，布局（盒模型，flex，grid）

文档流    

首先我们先了解一个概念，文档流“Normal flow”是css中定位的一种默认情况，平时我们所说的BFC、IFC等都是“Normal flow”的情况下的规则。

    常规情况下脱离文档流的是float，absolute，fixed。英文文档解释的意思,当元素浮动的时候,会先遵循“Normal flow”的规则，然后尽可能的向俩边靠。所以float并不是会脱离文档流，反而是依赖于文档流。position中的absolute和fixed的情况下，官方文档解释说会完全脱离“Normal flow”。至于文本流，我自己还没有看到这种解释的。在“Normal flow”中，BFC规则中，文本会围绕在浮动元素旁边。出现了这种现象，可能国人就自定义了“文本流”这种东西。

    总结：表面上看，float脱离了“文档流”，没有脱离“文本流”；position中的absolute和fixed全部脱离。这种解释也合情合理，是标准答案。

浮动和浮动的清除

定位和定位的常用方法

fixed和absolute：两者的效果在没有滚动条的时候是一样的

区别：fixed是固定定位，absolute是绝对定位。Fixed块有滚动条之后不显示。

          relative和absolute：absolute块脱离文档流，relative会保留定位块原来的位置

          static是默认的定位

注意：absolute相对于父元素定位，父元素必须是absolute和relative定位

布局之flex

display:flex; display:-webkit-flex;//safari
Justify-content：主轴（默认水平）
Align-content：垂直轴
Flex-wrap：是否换行（默认不换行）
Flex-direction:方向（column,column-reverse）
Align-content和align-items的相同点和不同点：都是对侧轴的对齐方式，不同点是align-content是对多行，align-items是对一行，不是对整个容器

布局之grid

详情见：