一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
防止高度坍塌的解决方案
1.给父元素设置固定高度
缺点:大多数情况父元素的高度是由内容撑起的,很难提前固定父元素的高度
2.为父元素设置overflow:hidden属性
原理:CSS中的overflow:hidden属性会强制要求父元素必须包裹住所有内部浮动元素,以及所有子元素的margin范围
缺点:如果刚好父元素有些超出范围的子元素内容需要显示,不想隐藏,就会发生冲突
3.在父元素的结尾追加一个空的块级元素,并给空元素设置clear:both
原理:利用 clear:both 属性和父元素必须包含非浮动的元素的两个原理
缺点:无端多出一个看不见的空元素,可能会影响选择器和查找元素
4. 设置父元素也浮动
原理:浮动属性也会强制父元素扩大到包含所有浮动的内部元素
缺点:会产生新的浮动,父元素的浮动,导致父元素平级的的div上移动
5.为父元素末尾伪元素设置 clear:both
写法:父元素::after{ content:""; display:table; clear:both; }
优点:既不会影响显示隐藏,也不影响查找元素,又不会产生新的浮动问题
问题:个别浏览器 display:table 会有默认高度,保险起见价格 height:0px
什么是BFC(Block formatting context)
BFC就是页面上的一个隔离的独立渲染区域,
区域内的子元素不会影响外面的元素,
外面的元素也不会影响区域里边的元素
BFC的布局规则
默认:内部的块级元素会在垂直方向,一个接一个的放置,每个块级元素独占一行
块级元素垂直方向的总距离由边框大小+margin共同决定的
属于同一个BFC的两个相邻的块级元素在垂直方向上的margin会发生重叠,水平方向的不会
左侧BFC渲染区域的margin，必须与右侧BFC渲染区域的margin相衔 接，不能出现重叠
计算父元素BFC渲染区域的高度时，内部浮动元素的高度，都必须 算在内。
如何形成BFC区域
1. float值不为none
2. position值不为 static或者relative
3. display的值是:inline-block table table-cell flex table-caption 或 inline-flex
4. overflow的值不为visible
避免垂直方向的margin合并
1.给下边元素包裹一个块级元素,并设置overflow:hidden
原理:新外层元素，变成一个BFC方式的渲染区域，就必须包裹内部 子元素及子元素的margin。
确定:为如果父元素中部分自由定位的子元素，希望即使超出父元 素范围，也能显示时，就冲突了。
2.父元素::before{ content:””; display:table}
原理:display:table，在子元素之前形成平级的bfc渲染区域。不允许子元素的margin进入::before范围内。
优点:既不隐藏内容，又不添加新元素，又不影响高度。
避免垂直方向的margin溢出
1.设置父元素overflow:hidden
原理:父元素形成BFC区域,就必须包裹子元素及子元素的margin
缺点:如果有子元素即要溢出,又要显示,就会冲突
2.为父元素添加边框,并且设置边框颜色为透明
原理:这里不是形成BFC，而是边框本身就能隔绝margin
缺点:边框会增加父元素的大小
3.为父元素添加padding-top代替第一个子元素的margin-top
原理:这里也不是bfc。而是因为padding本身可以阻隔margin溢出。
缺点:对父元素的高度有影响
解决:为父元素添加box-sizing:border-box
4.在父元素内第一个子元素之前添加一个空的<table></table>
原理:table的display属性默认相当于table，所以形成小的bfc渲染区 域。其他元素的margin不能进入table范围内。
就阻隔了margin向上溢出。
优点: 空table元素没有大小，不占用父元素控件。
缺点: 增加一个看不见的空元素，干扰查找元素
5. 父元素::before{ content:""; display:table; }
优点::既不隐藏内容，又不添加新元素，又不影响高度。
左定宽右自适应布局
1.左边定宽元素左浮动: .left{ float:left; width:固定宽 }
2.右边元素不用右浮动，而是.right{overflow:hidden; … }
原理:右边元素overflow:hidden后，形成BFC渲染区域。左边的float 元素就不能进入右边范围了
弹性布局
弹性布局的概念
容器:弹性布局的容器，简称“容器”，是指要实现布局效果的父元素(flex container)
项目:弹性布局的项目，简称“项目”，是指要实现布局效果的子元素， 称为项目(flex item)
主轴:是指弹性布局的多个项目排列方向上的一根轴 (main axis)
交叉轴:是指与主轴交叉的一根轴称为交叉轴(cross axis)
使用弹性布局，都要先使父元素变为弹性布局的容器：
如果希望弹性布局的父元素独占布局中的一行，就要设置 父元素的display属性为flex
如果希望弹性布局的父元素显示为行内元素特征， 与其它元素同在一行内，可设置父元素的display属 性为inline-flex
容器的属性
flex-direction属性
flex-direction属性，可指定容器的主轴及其排列方向
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap属性
flex-wrap属性，专门设置当一个主轴排列不下所有项目时，是否 换行显示。
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap：(默认值) 不换行
wrap：换行，第一行在上方
wrap-reverse :换行 第一行在下方
flex-flow属性
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap
justify-content属性
justify-content属性，专门定义项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-around | space-between | space-between;
flex-start（默认值）：表示以主轴的起点对齐
flex-end：表示以主轴的终点对齐
center： 表示在主轴上居中对齐
space-between：表示两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等
align-items属性
align-items属性，专门定义所有项目在交叉轴上的统一对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start:表示让项目以交叉轴的起点方向对齐
flex-end:表示让项目以交叉轴的终点方向对齐
center:表示让项目以交叉轴的中线居中对齐
baseline:表示让项目以交叉轴的基线对齐
stretch:表示如果项目未设置尺寸，就让项目在交叉轴上占满所有空间。
项目属性
• 除了可以对父容器设置属性外，还可对项目设置属性。
• 该组属性只能设置在项目元素上，只控制一个项目，不影响容器以及其他项目的效果。
• 今后，只要个别项目的样式与大部分项目有所不同时就可为这个特立独行的项目设置项目属性。
order属性
• order属性，专门定义项目的排列顺序。
• 其值为整数数字，无需单位。
• 值越小，越靠近起点，默认值是0。
flex-grow属性
• flex-grow属性，专门定义项目的放大比例。
• 如果容器有足够的空间，项目可以放大。
• 其值为整数数字，无需单位。
• 默认情况，项目不放大。
• 取值越大，占据剩余的空间越多。
flex-shrink属性
• flex-shrink属性，专门定义项目的缩小比例。
• 如果容器空间不足时，项目可以缩小。
• 缩小的比例取决于flex-shrink的值。
• 其默认值为1，表示空间不足时，则等比缩小。
• 可改为0，表示不缩小。
align-self属性
• align-self属性，专门单独定义某一个项目在交叉轴上的对齐方式。
• 与align-items属性对比
• align-items定义在父容器上约束所有项目的统一对齐方式
• align-self定义在项目上，只约束当前所在的一个项目。
• 其取值和align-items完全一样。只是多了一个auto值，表示继承 父元素的align-items效果。
