CSS笔记（九） 盒子模型---------清除浮动

前言

我们前面学到的浮动元素有一个标准流的父元素，他们有一个共同点特点，都是有高度的

但是，所有的父盒子都必须给高度吗

最好的选择是不是让子盒子撑开父盒子，有多少子盒子就能撑开父盒子

但是呢，由于在网页中父盒子在很多情况下没有给高度，子盒子float 浮动了又不占有位置，那么没有盒子撑开父盒子了，父盒子的高度就会为0,也就是我们说过的父元素坍塌

---

一、清除浮动是什么？

• 清除浮动的本质就是清除浮动元素脱离标准流造成的影响
• 如果父元素本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的盒子自动检测高度。父级有了高度，就不会影响下面的标准流了 

二、清除浮动

1.语法

.box{
clear:both
}

属性值如下：

left	清除左侧浮动的影响
right	清除右侧浮动的影响
both	同时清除左右两侧浮动的影响（常用！！！！）

2.清除浮动的方法

1.额外标签法

在最后一个浮动元素的末尾添加一个空标签，设置清除浮动样式（必须是块级元素才可以！！！）

 比较容易理解，但是结构化较差，因为添加了很多标签

2.父级元素添加overflow属性

将属性值设置为hidden、auto、scroll（除了visible的任何值）

3.父级添加after伪元素

				.clearfix::after{
					display: block;
					content: "";
					clear: both;
				}

  .clearfix::after{
                       display: block;        转换为块级元素，因为after默认的是行内元素
                       content: "";             必须要有这个属性！！可以为空         
                       clear: both;              核心语句
                }

.clearfix    给需要清除浮动的父元素设置一个公共类名，之后哪个盒子有需要就可以加给谁

有的会添加*zoom：1，这个是为了兼容IE浏览器6、7

4.父级添加双伪元素

代码如下（示例）：

                .clearfix::before
                .clearfix::after{
                    display: table;
                    content: "";
                }
                .clearfix::after{
                    clear: both;
                }

---