经典的CSS布局问题

水平居中

• 对于行内元素: text-align: center;
• 对于确定宽度的块级元素：

1. width和margin实现。margin: 0 auto;
2. 绝对定位和margin-left: -width/2, 前提是父元素position: relative

• 对于宽度未知的块级元素：
  1. table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto。
  2. inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。
  3. 绝对定位+transform，translateX可以移动本身元素的-50%。
  4. flex布局使用justify-content:center

垂直居中

1. 利用line-height实现居中，这种方法适合纯文字类
2. 通过设置父容器相对定位，子级设置绝对定位，标签通过margin实现自适应居中
3. 弹性布局flex:父级设置display: flex; 子级设置margin为auto实现自适应居中
4. 父级设置相对定位，子级设置绝对定位，并且通过位移transform实现
5. table布局，父级通过转换成表格形式，然后子级设置vertical-align实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

清除浮动

1. 添加额外标签

<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>

2. 父级添加overflow属性，或者设置高度

<div class="parent" style="overflow:hidden">//auto 也可以
    //将父元素的overflow设置为hidden
    <div class="f"></div>
</div>

3. 建立伪类选择器清除浮动（推荐）

//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
      content: '';  
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;
}
<div class="parent">
    <div class="f"></div>
</div>

使用display:inline-block会产生的问题两个

display：inline-block元素放到一起会产生一段空白。
**产生空白的原因:**元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。

解决办法

1. 将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行

<div class="container">
  <div class="left">
      左
  </div><div class="right">
      右
  </div>
</div>

2. 父元素中设置font-size: 0，在子元素上重置正确的font-size

.container{
  width:800px;
  height:200px;
  font-size: 0;
}

3. 为子元素设置float:left

.left{
  float: left;
  font-size: 14px;
  background: red;
  display: inline-block;
  width: 100px;
  height: 100px;
}
//right是同理

BFC

W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context， 即块级格式上下文）。
触发条件:
一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 下列方式会创建块格式化上下文：

• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素） 等等。
  BFC渲染规则:

1. BFC垂直方向边距重叠
2. BFC的区域不会与浮动元素的box重叠
3. BFC是一个独立的容器，外面的元素不会影响里面的元素
4. 计算BFC高度的时候浮动元素也会参与计算