main
CSS总结(三)：居中效果、清除浮动、三栏布局
一：居中效果实现小结
1，文本居中
文本水平居中：text-align:center;
文本垂直居中：①设置line-height=父元素的height （单行文本）；②通过设置padding-top、padding-bottom
2，盒子水平居中：
① margin:0 auto; 该盒子需设置了width，不然其width默认为:auto，此时会把值为auto的margin的值改为0
② 使用绝对定位 ，注意其父盒子要设置定位，position值不为static，常用的是设置为相对定位，即子绝父相
width: 100px;
position: absolute;
left: 50%;
/* 设置负左外边距，其值为自身宽度的一半 */
margin-left: -50px;.parent {
text-align: center;
}
.child {
display: inline-block;
}④使用绝对定位
/* 其父盒子需要设置值不为static的定位，常用相对定位 */
position: absolute;
left: 50%;
/* 不知道盒子自身的宽度；IE9开始支持 */
transform: translate(-50%,0);⑤flex布局
.parent {
display: flex;
justify-content: center;
}3，盒子垂直居中
①通过设置display属性
.parent {
/* 注意，使用这种方式会导致其margin失效 */
display: table-cell;
vertical-align: middle;
}②使用绝对定位，注意其父盒子要设置定位，position值不为static，常用的是设置为相对定位
height: 100px;
position: absolute;
top: 50%;
/* 设置负上外边距，其值为自身高度的一半 */
margin-top: -50px;/* 其父盒子需要设置值不为static的定位，常用相对定位 */
position: absolute;
top: 50%;
/* 可在盒子高度自适应下实现垂直居中；IE9开始支持 */
transform: translate(0,-50%);④flex布局
.parent {
display: flex;
align-items: center;
}二：清除浮动小结
清除浮动：不是删除浮动，而是清除浮动的影响。
1，使用clear
clear: left | right | both | none 应用于块级元素
如：h3 {clear:left;} 确保h3元素左边没有浮动元素
clear工作原理：CSS1和CSS2中，增加元素的上外边距
CSS2.1中，在元素上外边距之上增加额外间隔（即清除区域），并不改变元素的外边距
缺点：靠近浮动元素那边的margin会失效
2，给浮动元素的祖先元素加高度
有高度的盒子才能关住浮动
缺点：直接设置height不好，高度最好让内容去自然撑高
3，隔墙法：
在两部分浮动之间加一个有高度的div，并设置其clear属性。
内墙法：
浮动元素
这可看作是一道内墙
4，偏方：设置overflow:hidden;（慎用，原因见下文）
5,使用伪元素，推荐使用这种方法
/* 使用伪元素:after清除浮动 #版本一# */
.clearfix:after{
visibility:hidden;
display:block;
clear:both;
content:"";
font-size:0;
height:0
}
/* 下面是用来解决ie6，7浮动问题 */
.clearfix{*zoom:1}; /* #版本二# */
.clearfix:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;}/* #版本三# （推荐使用） */
/* 同时加入:before以解决现代浏览器上边距折叠的问题 */
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}补充：BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的主要特征: 1.BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。 2.BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。
能够触发(Block Formatting Context)BFC的方式有：
根元素html；
float的值不为none；
overflow的值不为visible；
display的值为table-cell, table-caption, inline-block,flex,inline-flex中的任何一个；
position的值不为relative和static。
通过overflow闭合浮动，实际上已经创建了新的 块级格式化上下文，这将导致其布局和相对于浮动的行为等发生一系列的变化，闭合浮动只不过是一系列变化中的一个作用而已。所以为了闭合浮动去改变全局特性，这是不明智的，带来的风险就是一系列的bug;始终要明白，如果单单只是需要闭合浮动，overflow就不要使用
三：三栏布局小结
1，圣杯布局
圣杯布局：给父容器设置height和左右padding；主子容器放在最前以优先加载，子容器全部左浮动，靠设置负margin和相对定位来实现两栏、三栏布局、多栏布局
优点: 1.使主要内容列先加载。
2.允许任何列是最高的。
3.没有额外的div。
4.需要的hack很少
注：使用圣杯布局三栏布局时，若中间栏的宽度小于左右定宽栏的宽度时，布局就会发生紊乱！！！使用双飞翼布局不存在这种问题；左右两栏设置百分数宽度也可以避免这种问题。
Header
left
right
2，双飞翼布局
相比圣杯布局，双飞翼不必设置左右栏的position: relative，也不必设置左右left、right值，只需多添加一个子元素包含，相应的padding换成margin
双飞翼布局的好处：1.主要的内容先加载的优化; 这是用圣杯布局和双飞翼布局的主要原因！！！
2.兼容目前所有的主流浏览器，包括IE6在内；
3.实现不同的布局方式，可以通过调整相关CSS属性即可实现。
Header
main
left
right
3，一般三栏/多栏布局
布局思想：先左右浮动，然后中栏设置margin
这种布局必须把左右浮动放前面，中栏放最后面，所以无法做到像圣杯布局、双飞翼布局那样可以让主要内容优先加载！
body,div,p{
padding: 0;
margin: 0;
}
.container{
overflow: hidden;
}
.left{
float: left;
width: 200px;
height: 400px;
background-color: green;
}
.right{
float: right;
width:200px;
height: 400px;
background-color: gray;
}
.middle{
margin: 0 220px;
height: 400px;
background-color: #9AA507;
}4，Flex布局
待更新...