浮动及css伸缩盒弹性布局

浮动

固定搭配：因为要遵循盒子模型公式：
margin-left+border-left+padding-left+content+padding-right+border-right+margin-right=父元素内容区大小

float:left;
margin-left:  ;
margin-top: ;

float:right;
margin-right:  ;
margin-bottom: ;

块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度（子元素高度）所决定。
行内元素与其他元素共享一行空间，宽高由其内容所决定不能直接设置宽高，需要结合CSS的display来设置。
块级独占一行的，行内与其他元素共享一行

浮动产生的问题

①失去对父元素的支撑（高度塌陷）
②兄弟元素会顶上来
解决办法：
1.父元素设置高度
2.父元素设置overflow:hidden;（缺点：二级菜单不会显示）
3.clear——消除浮动元素对当前元素所产生的影响。
设置clear后浏览器会自动为元素添加一个外边距，使其位置不受其他影响
可选值：

clear:left; 消除左侧浮动元素对当前元素产生的影响
clear:right; 消除右侧
clear:both;消除两侧中最大影响的那侧

（1）书写位置：可以是下一个非浮动的兄弟节点
（2）在最后一个位置新增一个兄弟
（3）为父元素设置：

父元素::after{
content:‘’;
display:block;
clear:both;
}
父子级：
1.在子级元素后添加一个空元素，为其添加clear:both 弊端：增加了无意义的元素结构
2.给父级元素设置一个overflow:hiddden 解决了第一种方法的弊端
3.
.hidden::after 为需要清除浮动元素的伪对象中设置height:0，
#父元素::after{
display:block；
clear:both;
content:"";
}
（用伪类清除浮动时用after，并且加上content：""可以加内容也可以不加，但是一定要加上display：block；,同时还要写clear：both；）
兄弟级：
给当前元素（被浮动影响的元素）设置css属性clear,值可为left、right，both。作用分别为清除左浮动元素带来的影响，清除右浮动元素带来的影响，清除左右两侧浮动元素带来的影响。

弹性/伸缩盒布局与响应式布局

display:flex伸缩盒
弹性盒布局：Flex元素：宽高固定，宽高伸缩比例
伸缩盒布局:容器(container)、元素(item)
适用场景：弹性收缩比例、自动留白间隙、手机端
，对父元素设置display:flex
1.主轴：
默认情况下主轴是x轴，即flex容器中各元素在一行中分为多列显示；
如果主轴改成y轴，则一列中显示多行

2.排列方向:flex-direction
（1）列布局：沿着水平方向延伸

flex-direction:row; 从左到右
flex-direction:row-reverse; 从右向左

（2）行布局：沿着垂直方向

flex-direction:column; 从上到下
flex-direction:column-reverse; 从下到上

3.设置换行
flex-wrap:wrap;在一行中填充，放不下就换行
实现多行多列容器
flex-flow是flex-direction和flex-wrap的简写
4.比例划分

flex-grow：元素放大比例（子元素索取父元素剩余宽度的比例）
flex-shrink：子元素宽度大于父元素时，元素缩小自己的比例
flex-basis：设置元素宽度，如果同时设置了width和flex-basis，则flex-basis会覆盖width

flex简写属性：按照上面顺序
例如：flex:1 200px;——盒子最小值为200px，每个占一份
5.对齐方式

（1）主轴对齐方式：justify-content:
取值：

flex-start 【默认值】在主轴的开始显示
flex-end 在主轴的结束显示
center 在主轴的中心显示
space-around 填充空白自适应在主轴中心显示
space-between填充空白自适应在主轴中心显示，但是首尾两个元素距离容器没有空白

（2）交叉轴对齐方式：align-items:

stretch 【默认值】将盒子在交叉轴上进行拉伸，直至适应整个伸缩盒子容器
flex-start在伸缩盒子容器的伸缩开始位置显示，即伸缩盒子容器顶部
flex-end在伸缩盒子容器的伸缩结束位置显示，即伸缩盒子容器底部
center盒子在交叉轴中心显示
baseline 基线对齐（文本对齐）

（3）多轴排列在交叉轴对齐方式

align-content: center; /* 将项目放置在中点 */

align-content: start; /* 最先放置项目 */

align-content: end; /* 最后放置项目 */

align-content: flex-start; /* 从起始点开始放置flex元素 */

align-content: flex-end; /* 从终止点开始放置flex元素 */