清除浮动的方法

一、问题：

　　　父盒子高度为0，子盒子不占位置，子盒子不会撑开父盒子。

　　　（下面的标准流盒子，会跑到父盒子中的子盒子下面。）

二、解决方案

　　  ◆清除浮动不是不用浮动，清除子盒子因为浮动，对父子造成的影响。

　　  ◆清除浮动的方法

　　  clear: left  |  right  | both

　　  工作里用的最多的是clear:both;

　　  ★额外标签法

        在最后一个浮动元素后添加标签。

　　 ★给父集元素使用overflow:hidden;    bfc

  　  如果有内容出了盒子，不能使用这个方法。

　　 ★单伪元素清除浮动 　　

.clearfix:after {

　　　　　　　　content: “.”;

　　　　　　　　height: 0;

　　　　　　　　visibility: hidden;

　　　　　　　　overflow: hidden;

　　　　　　　　dispaly: block;

　　　　　　　　clear: both;

　　　　}

　　　　.clearfix {

　　　　　　　　/*IE678*/
　　　　　　　　zoom: 1;

　　　　}

 

　　★双伪元素清除浮动 　　　

　　　

 .clearfix:before,  .clearfix:after {

　　　　　　　　　content: “.”;

　　　　　　　　　display: table;

　　　　}

　　　　.clearfix:after {

　　　　　　clear: both;

　　　　}

　　　　.clearfix {

　　　　zoom: 1;/*IE678*/

　　　　}

三、 浮动的盒子问题

　　　浮动的盒子比标准流盒子高，但是能够遮挡住标准流盒子，遮挡不住里面的图片和文字。

　　   如：文字绕图实现