CSS.清除浮动

CSS.清除浮动

浮动属性float，在CSS中应用广泛，写网页时可以用来水平布局，其中使用最频繁的两个属性值就是left和right；一个靠左浮动，一个靠右浮动。实际中写页面的时候呢，父盒子一般不给高度height，因为内容会把父盒子撑开。但是，如果此时给子盒子添加了浮动属性，会怎么样呢？首先来说一下浮动的特点：

浮动的特点呢？1、“飘起来了”：浮动后的元素会脱离标准流，在标准流中不占位置，并且比标准流的元素高半个级别 2、“怕上欺下”：浮动的元素只会影响自身下面的布局，并且受到自身上面元素边界的影响 3、“排排坐”：浮动后，一行可以显示多个元素，并且能设置宽高（例如行内元素a标签浮动后，就能自由设置宽高了！）。

浮动带来的影响

既然浮动后的子盒子会脱标，那么子盒子就撑不起来父盒子了！也就是，如果父盒子没有设置高度，此时父盒子高度由内容撑开，但是如果子元素浮动了，不占位置了，不能撑开盒子了，此时父盒子的高度为0。

<div class="w">
	<div class="v"></div>
</div>

.w{width: 200px;background-color: pink;}
.w .v{width: 100px;height: 100px;background-color: deeppink;float: left;}

清除浮动的四种方法

一、额外标签法

​ 额外标签法：给父元素的最后添加一个块级元素，再给添加的块级元素设置一个清除浮动的核心代码：clear:both。

<div class="w">
			<div class="v"></div>
			<!-- 给父元素的最后添加一个块级元素-->
			<div class="m"></div>
		</div>

.w{width: 200px;background-color: pink;}
.w .v{width: 100px;height: 100px;background-color: deeppink;float: left;}
/* 再给添加的块级元素设置一个清除浮动的核心代码：clear:both。 */
.m{clear:both}

看看效果吧：父元素被撑开了！说明这个方法能清除浮动带来的影响，但是，有没有发现，这个方法虽然能成功清除浮动，但是在html页面中添加了额外的标签（所以称为额外标签法）？！那么如果有N个需要清除浮动的父盒子，那么页面就会多N个额外的标签，这样不仅会影响页面的结构，更也会页面增添许多的负担，所以这个方法有致命的缺点！所以，我们要寻求更高效节能的方法。

二、伪元素清除法

同样的，再品品，额外标签法，给父元素的最后添加一个块级元素，再给添加的块级元素设置一个清除浮动的核心代码：clear:both。如果说，直接在html添加块元素，会导致也页面结构复杂化，那么我们可以利用CSS在html页面设置伪元素来实现。如何使用伪元素来实现呢？回归本质，来拆分：
1、“给父元素的最后添加一个元素” 父元素::after****
2、”这个元素的类别是块级“ display:block
3、“设置一个清除浮动的核心代码” clear:both
OK，将后两个属性+属性值设置给父元素的尾部伪元素，来看一下实际效果：

<div class="w">
	<div class="v"></div>
</div>

.w{width: 200px;background-color: pink;}
.w .v{width: 100px;height: 100px;background-color: deeppink;float: left;}
.w::after{
		content: '';      /* 伪元素必加的一行 */
		display: block;   /* 转换块级元素 */
		clear: both;      /* 清除浮动的核心代码 */
}

完成！在实际开发中，我们可以在CSS初始化中，将清除浮动单独设置一个类选择器.clearfix{}，HTML中哪个父盒子需要清除浮动，就在它的class中加入clearfix！完美！

.clearfix::after{
		content: '';      /* 伪元素必加的一行 */
		display: block;   /* 转换块级元素 */
		clear: both;      /* 清除浮动的核心代码 */
}

三、超出隐藏法overflow:hidden

直接给父盒子的样式css添加：overflow:hidden，即可清除浮动。

<div class="w">
	<div class="v"></div>
</div>

.w{width: 200px;background-color: pink;
	overflow: hidden;  /*父元素设置超出隐藏，触发BFC*/
}
.w .v{width: 100px;height: 100px;background-color: deeppink;float: left;}

这个方法同样能清除浮动！需要清除浮动的父盒子，直接加上这一句代码即可！

四、直接高度法

既然父盒子没有设置高度，子盒子设置浮动后不能撑开父盒子，那么直接给父盒子添加高度不就好了>。<

<div class="w">
	<div class="v"></div>
</div>

.w{width: 200px;background-color: pink;
	height: 200px;/*直接设置高度*/
}
.w .v{width: 100px;height: 100px;background-color: deeppink;float: left;}