清除浮动的方式以及元素居中的方法！

清除浮动

1.为什么要清除浮动？

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

1.比如,我给父盒子设置一个boder,内部放两个盒子一个big、一个small，未给big和small设置浮动，则他们会默认撑开父盒子

2.如果给这两个盒子都加上了float属性的时候，底部的盒子就会顶上来，因为父盒子没设置高度，变成一条线，big和small已经浮动了

 

小结：当父元素不给高度的时候，内部元素不浮动的时候会撑开，而浮动时父元素会变成一条线，所以这个时候就需要解决浮动

2.清除浮动的四种方式

1. 额外标签法（给最后一个浮动的标签后，新加一个标签，给其设置clear:both;,）（但这种方式是不推荐使用的，因为添加无意义的标签，语义化差）

 

1. 父元素添加overfiow属性（过触发BFC的方式，实现清除浮动）

 

1. 使用after伪元素清除浮动

优点：符合闭合浮动思想，结构语义化正确,不容易出现其他为题
缺点：IE6-7不支持伪元素：after，使用zoom:1触发

 

1. 使用before和after双伪元素清除浮动

 

除了这四种还有一种更为简单的方式，给父元素定义好height高度，就解决了父级元素无法获取到高度的问题。

元素居中

 

方法一：给父元素设置成弹性盒子，子元素横向居中，纵向居中（弹性布局法）

方法二：父相子绝后，子部分向上移动本身宽度和高度的一半，也可以用transfrom:translate(-50%,-50%)（最常用方法）（定位布局 相对定位）

方法三：父相子绝，子元素所有定位为0，margin设置auto自适应（百分比布局）