为什么要清除浮动以及清除浮动的几种方法

1.为什么要清除浮动？

答：因为当父盒子高度为0时，子盒子不占位置，子盒子不会撑开父盒子，所以下面的标准流盒子，会跑到父盒子中的子盒子下面。

2.清除浮动的几种方法

①在浮动盒子的后面添加一个空盒子，对该空盒子添加CSS样式：clear: both;

②对浮动的盒子父级添加该属性：overflow: hidden;

③单伪元素标签法，谁出问题就给谁加一个clearfix类名。

.clearfix:after {
    content: “”;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    dispaly: block;
    clear: both;
}
.clearfix {
    zoom: 1;/*IE678*/
}

④双伪元素标签法，谁出问题就给谁加一个clearfix类名。

.clearfix:before,  .clearfix:after {
    content: “”;
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;/*IE678*/
}

关于浮动的小知识：

浮动的盒子千万不要让他超出父盒子。

超出父盒子的部分会影响下面盒子中的浮动的子盒子。

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

隐藏盒子问题

1.overflow：hidden;             隐藏盒子超出的部分。

2.display: none;                    隐藏盒子，而且不占位置。(用的最多)

扫描二维码关注公众号，回复： 2450432 查看本文章

3.visibility: hidden;               隐藏盒子，而且占位置。

4.opacity: 0;                          隐藏盒子，而且占位置。

5.Position/top/left/...-999px 隐藏盒子，而且占位置。