CSS清除浮动

一：为什么要清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占用位置，最后父级盒子为0时，就会影响下面的标准流盒子。

---

二：清除浮动的本质

1.清除浮动的本质是清除浮动元素造成的影响
2.复合父盒子本身有高度，则不需要清除浮动
3.清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

---

三：清除浮动的方法

语法：

选择器 {
	clear: 属性值;
}

属性值	作用
left	清除左侧浮动的影响
right	清除右侧浮动的影响
both	同时清除左右两侧浮动的影响

---

1.额外标签法

额外标签法也称为隔墙法
额外标签法会在浮动元素末尾添加一个空的标签。例如
< div style=" clear: both"> < /div >
优点：通俗易懂
缺点：结构化差

当我们给父盒子不设置高度的时候，将子元素设置浮动，父盒子默认高度为0

下一个标准流盒子就会顶上来，达不到我们所想要的自动调整父盒子高度，所以我们需要清除浮动
使用额外标签法，在最后一个浮动元素后面，设置一个块级盒子让其堵住浮动盒子，然后给块级元素设置，clear:both即可

---

2.父级添加overflow

可以给父级添加overflow属性，将其属性值设置为hidden,auto或scroll
优点：代码简洁
缺点：无法显示溢出的部分

---

3.:after伪元素法

:after伪元素法是额外标签法的升级版，也是给父元素添加下面代码。

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            *zoom: 1;
        }

优点：没有添加标签，结构简单
缺点：照顾低版本浏览器

---

4.双伪元素清除浮动

也是给父级添加如下代码

 .clearfix:before, .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }

优点：代码简洁
缺点：照顾低版本浏览器

---