浮动float和flex

浮动float，

脱离了标准流/文档流，float设置的left/right/none/inherit是将盒子将变成行内，不独占一行，且居第一个的左边/右边，不同的父标签是不同的float。之后的float都在第一个那一行的左/右边，如果占满一行，从下一行开始，且float盒子排布时，也可以有内外边距。上一行如果高度不一致，下一行是从最后的高度开始排布。且如果浮动后面又没浮动的盒子，如果是块状元素，会将浮动不在标准流，找上一个进行排布。所以如果一个父标签内只有浮动，浮动是脱离标准流，只有标准流的盒子能撑大 父标签盒子大小，只有浮动盒子，父标签不会显示，但是内部的浮动还是当又高度的父标签处理。所以下一个如果是块状会在最上面，但是浮动会遮蔽标准流的盒子，我们让父标签的高度有=浮动字标签撑大的盒子，需要在父标签最后写块状元素，且给该标签设置css样式

clear：none。

则盒子还是浮动，只不过父标签高度当没浮动的高度。或者用伪元素选择器也可以。双伪元素法，可以改开头设置table，但是没内容，但是也会没有坍陷，且正常排版，增加的末尾元素可以是table/block，第四种方法是给父标签设置overflow：hidden，溢出，没有父标签高度，浮动相当于溢出，但是浮动不会裁掉，至少让浮动能撑大高度。如果父标签内有内容，也是将浮动和高度一起算。这些都会让浮动高度算进去，无论父标签高度几何。浮动只是在父标签内，于父标签同级的标签就是在父标签下正常排布。无论浮动是否占用位置，但是浮动一定会遮蔽标准流元素。

如果有多个浮动和元素怎么排布。

即使块级元素在浮动盒子后面，浮动盒子不在标准流内，只看标准流，但是浮动盒子会覆盖标准流盒子。

Flex布局

float设置只能设置在两端开始，如果，我们需要设置在中间，只能用内外边距来解决，所以我们用更为简单的Flex可以解决盒子在中间等问题。Flex是给父标签设置display是Flex，所以不存在如float父标签还有标准流的，且Flex没有脱离标准流，只是可以这样排布。Flex是内部盒子都是弹性盒子，当独占一行时，没有设置占下一行，则盒子即使设置高度，仍会压缩，当那一行满了。默认主轴是水平，垂直的是侧轴，排布是在主轴上排布，满了就到主轴下一行，即使主轴是y轴，排布盒子不会翻转，只是垂直放。排布也会看盒子外边距。默认是一行，如果一行盒子没有设置高度，高度默认是父标签的高度，就是主轴如果没有设置长度，是子的高/宽，要不就不存在，但是纵轴没有设置，长度默认是父标签。默认是一行

justify-content设置主轴对齐方式

该属性justify-content可以设置主轴对齐方式，主轴盒子是如何对齐，且只用于一行。默认就是一行。flex-end是从主轴最后开始排center是起点移到中间居中排布。整个盒子呈现是居中排布。space-between是盒子占满一行，但是间距均匀存在于盒子之间，space-around是每一个盒子两侧有间距且相等进行排布，space-evenly是父标签盒子和子标签盒子与盒子之间间距相等排布。这些都是主轴上的排布，且只用于一行的排布。

align-self侧轴对齐方式

align-self用于子标签的css样式，用于那一个的侧轴对齐方式，align-items在父标签css样式，设置整个子标签盒子纵轴对齐方式默认是stretch，但是只在没有长度的时候有，所以当有长度的时候，纵轴设置相当于没设置，就在第一行。这个纵轴的如果没设置/stretch，设置这个当没设置纵轴就会平铺，但是设置高度，就让他在内容区域相当于flex-start。每一个盒子在纵轴的哪里。是默认设置纵轴是strech才行，如果没设置这个，没有父标签宽度。给父标签设置css，align-items，也可以给找到子标签但是是align-self

修改主轴方向flex-direction

该属性写在父标签的css样式，修改主轴方向是水平还是垂直，且可以修改盒子从哪里开始放，标准流是从上往下。一行，flex不会存在溢出。设置主轴方向上的长度，盒子会变化，不设置，父标签主轴会被撑大。无论长宽。纵轴会被撑大。

flex属性

在flex下的子标签的盒子，主轴方向没有设置就是父标签长度，纵轴没有设置，就是内部高度，普通div宽度和高度，如果没写，高度是子标签，但是宽度是父标签内容区域宽度的全部。

写在子标签的css样式，当处于一行的盒子，css样式有flex，则除却没有设置flex

的盒子的宽度和外边距，就是整个flex设置了的盒子的宽度，看设置flex盒子一共有几份，一个盒子A的css样式是flex：1，另一个B是flex：2，则A盒子占剩下的1/3.B占2/3.

即使设置了主轴的对齐方式，设置了flex无效，flex是主轴上的分配。从上到下，从左到右，是行内块元素。flex只会让盒子主轴长度变，无论设置了什么，不会让纵轴长度变。

是否换行flex-wrap

可以设置是否换行，默认是nowrap不换行。设置wrap可以换行，不换行，会压缩盒子，换行，放不下放下一行。放下一行和float一样。换行就是放在上一行盒子下面，看是否有外边距。

行对齐方式align-content

只能作用于flex-wrap：wrap，属性值和nowrap一样的。

从起点，从终点和nowrap一样，都是从主轴一开始。不同行的对齐方式，主轴还是单行主轴属性，但是纵轴变成行对齐方式。可以换主轴。无论换不换主轴，换行都是纵轴上换行。行对齐方式都是纵轴对齐方式。对于纵轴，起点和主轴一样。多行纵轴对齐方式是多行对于纵轴如何。单行纵轴方式可以设置一个盒子的纵轴对齐方式。压缩盒子也不一定全压缩刀里面，也可能溢出。标准流上一行放不下就往下一行放。

这些浮动的盒子内部也可以去写盒子，盒子是在这里的，只不过整个盒子是浮动的。这些浮动的盒子内部也可以写盒子/浮动的盒子，都可以。

float在父标签中，不会是弹性盒子，只要一行满了就去下一行。float没有对齐方式，可以设置外边距来高对齐方式。给父标签设置flex是下一级的盒子是按这种排布，排是否是单行，变成行内元素。用flex，子标签盒子排是主轴开始排.

当盒子主轴方向可以盒子大小压缩时，主轴对齐方式是不起作用的，纵轴对齐方式，当纵轴溢出，长度满了，也是无效的。我们对齐都是相对于内容区域。行对齐方式是对于多行在纵轴上，但是如果没设置纵轴，没有默认纵轴，对于一行而言就是和标准流一样，放最上面。

多行，也和标准流一样，只不过会换行放。