CSS—居中效果 及 清除浮动

文本居中：

1. 设置text-align: center;实现水平居中；设置 line-height 等于父元素高度，实现垂直居中。
2. 在父元素中设置display：table-cell;vertical-align：middle;来实现垂直居中。
   • 使用table-cell是最好不要与float和position：absolute一起使用，设置了table-cell的元素对高度和宽度敏感，对margin值无反应。

盒子居中：

1. 开启定位，将top left bottom right偏移设置为0，然后margin为0。

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

<!-- 通过translate（）函数移动自身也能实现 -->
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

2. 给父元素设置 display：flex；子元素设置 margin：auto；

  .box {
    /* position: relative; */
    display: flex;
    width: 300px;height: 300px;background-color: bisque;
  }
  .innerbox {
    width: 100px;height: 100px;background-color: blueviolet;
    margin: auto;
  }
  
  <div class="box">
    <div class="innerbox">1</div>
    <div class="innerbox">2</div>
  </div>

解决高度塌陷 或者 清除浮动 的常用两种方法:

高度塌陷：在浮动布局中，父元素的高度默认所被子元素撑开的。当子元素浮动后，会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失，父元素高度丢失以后，其下方的元素会自动上移，导致页面混乱。

解决高度塌陷的方法：

1. 父元素 开启 BFC (Block Formatting Context) 块级格式化；
   • 常用的方式：为元素设置 overflow：hidden 开启BFC 。
2. 父元素 设置 clear 属性清除浮动的影响：
   • .box:after{ content: ""; clear: both; display: block;}

clear作用原理：设置clear属性后，浏览器会自动为元素添加一个上外边距（margin-top），以使其位置不受其他元素的影响。

clear属性有3个常用的可选值：

• clear : left ; 清除左侧浮动对元素的影响
• clear : right ; 清除右侧浮动对元素的影响
• clear : both ; 清除两侧中影响最大的那侧

如下图，box2左侧浮动，box4右侧浮动，为box3设置clear：both；

其效果是浏览器自动为box3添加了500px的margin-top。