清除浮动，水平居中，垂直居中。

浏览器的流

浏览器对元素的解析是流的方式进行。从左到右，从上到下。
类比水流，若设置浮动，浮动元素不存在流中，像船一样漂浮。
块级元素被浮动元素遮挡，行内元素围绕浮动元素

清除浮动

浮动：元素可通过设置float:left || right来实现浮动。浮动框将脱离文档流，知道触碰到另一个浮动框为止。

1. 手动设置父元素的宽度和高度
2. 利用BFC，设置父元素为overflow:hidden
3. 在子元素后设置空元素的样式clear:both
4. 在父元素后设置伪类:after和zoom

.clearfix :after{
	display:block;
	clear:both;
	height:0;
	content:"";
	visiablity: hidden;
}
.clearfix {
	zoom:1;
}

水平居中

1. 子元素是行内元素
   可设置父元素的text-align:center来实现子元素水平居中。
2. 子元素是块级元素

• 使用IFC。设置子元素inline-block再text-align:center
• 使用Flexbox实现。设置父元素display:flex;justify-content:center
• 使用定位属性实现。父元素position:relative，子元素position:absolute，left:50%实现左半边水平居中。
  • 若子元素宽度已知，使用负值margin即可
  • 若子元素宽度未知，使用CSS3新增transform:translateX(-50%)

3. 使用margin:auto实现。父元素relative,子元素left:0;right:0;magin:auto

垂直居中

1. 子元素是行内元素

• 单行行内元素，设置单行的行高line-height等于盒子的高度。

2. 子元素是块级元素

• 利用IFC，设子元素inline-block再vertical-aligin:middle
• 使用Flexbox，父元素display:flex;align-items:center
• 使用定位，与水平居中相同。

3. 使用margin:auto，与水平居中相同

水平垂直居中

1. 使用Flexbox,设置父元素flex,justify-content:center,align-items:center
2. 使用定位

• 设置父元素display:relative,子元素display:absolute,left:50%,top:50%
  • 子元素已知宽度则使用负值margin
  • 子元素未知宽度使用transform:translateX(-50%) translateY(-50%)

3. 使用margin:auto，父元素relative，子元素left:0;right:0;top:0;bottom:0;margin:auto

居中浮动元素

1. 使用定位，浮动元素和父元素均设position:relative

• 宽度未知,父元素left:50%,子元素right:50%
• 宽度已知,父元素left"50%，子元素负值margin

2. 在浮动元素外嵌套一层，设置margin:auto