关于css布局的一些总结

1.清除浮动的几种方式介绍

外面的层在显示的时候高度几乎为0，这就是因为里面的层用了浮动，所以需要清除浮动。

1、父级 div 定义 height
原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。简单、
代码少、容易掌握，但只适合高度固定的布局.

2、结尾处加空 div 标签 clear：both
原理：在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提高的 clear：both 清除浮动，
让父级 div 能自动获取到高度，如果页面浮动布局多，就要增加很多空 div，让人感觉很
不好

3、父级 div 定义 overflow：hidden
超出盒子部分会被隐藏，不推荐使用

4、父级 div 定义伪类：after 和 zoom
.clearfix：after{
content：""；
display：block;
clear：both;
}
.clearfix{zoom：1}
原理：IE8 以上和非 IE 浏览器才支持：after，原理和方法 2 有点类似，zoom(IE 专有属性)
可解决 ie6，ie7 浮动问题，推荐使用，建议定义公共类，以减少 CSS 代码。

2.水平垂直居中的方式有几种？

https://www.cnblogs.com/Julia-Yuan/p/6648816.html (全)

1.absolute transform：绝对定位加+转换


<div class="parent">
<div class="child">Demo</div>
</div>
<style>
	.parent {
	position：relative;
	}.child {
	position： absolute;
	left： 50%;
	top：50%;
	transform：translate(-50%, -50%）
	}
</style>

2.inline-block + text-align + table-cell + vertical-align（单元格方式）


<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
text-align：center;
display：table-cell;
vertical-align：middle;
}
.child {
display： inline-block;
}
</style>