前端学习：面试问到某某布局时的回答思路

专门写个文章提醒自己思考顺序，每次问到布局脑子就开始蒙开始混乱，千万不要败在布局上

一、考虑元素是块级元素还是行内元素还是行内块元素，考虑需要多少盒子

• 块级元素自上而下布局，独占一行，可以设置宽高；
• 行内元素从左到右，不能设置宽高，宽高和内容有关（因此高度可以用行高控制），外边距（margin）和内边距（padding）仅设置左右方向有效上下无效；
  -行内块元素高度、行高、外边距以及内边距都可以控制。 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的font-size为0，才会消除间隙
• 注意盒子外边距塌陷的问题，上下塌陷，父子塌陷——解决方法：BFC

二、如果涉及到一行多个盒子，考虑flex布局还是float布局

弹性布局

• 弹性盒子由容器（父元素）和项目（子元素）组成，设置弹性盒子，应从父元素中设置diapaly:flex；在flex眼中众生平等
• 父元素重要的相关属性：
• flex-direction（指定子元素排列方向（主轴），为横向排列还是纵向排列，还可以翻转）
• justify-content设置 主轴上子元素排列的方式（靠左对齐flex-start、靠右对齐flex-end、居中对齐center、平分剩余空间space-around、先两边贴边再平分剩余空间space-between）
• flex-wrap：wrap换行（nowrap不换行）默认不换行
• align-items：设置侧轴上子元素排列方式（具体和justify-content一样）

由此可见，要实现子元素水平垂直居中，可以justify-content和align-items都为center。

• 父元素中出现子项目换行（多行）的情况：
• align-content可以设置侧轴上子元素排列的方式

float布局

• 脱离文档流（盒子坍塌）——解决办法：清除浮动
• 清除浮动
• 为什么要清除浮动？
  浮动的盒子不在文档流中，会导致父盒子的高度变成0。

浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题,此时就需要在该元素中清除浮动。

• 如何清除浮动？（三种办法）

1. 在父盒子中，浮动元素最后面加一个空标签，空标签css设置clear:both：

<div style="clear: both;"></div>

clear:both本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。

2. 父元素添加overflow:hidden

原理：通过触发BFC方式，实现清除浮动
什么是BFC？
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
————————————————————————————————
触发BFC的条件及其相关影响：
1、float的值不是none。（float: left 将把元素移至左侧，并被其他元素环绕）
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex（display:
table 可能引发响应性问题）
4、overflow的值不是visible（overflow: scroll
可能产生多余的滚动条、overflow: hidden 将裁切溢出元素）

3. 使用after伪元素

.clearfix:after{
   /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height