清除浮动的方式

fbox1和fbox2是两个父盒子，宽高都没有设置，两个父盒子中各自又分别有三个div子盒子，这些子盒子都设置了都为100px的宽高，并且都往左边浮动，在子盒子未浮动前父盒子的高度由所有对应的子盒子决定。由于子盒子都浮动未左移时，子盒子各自都脱标，以致于父盒子高度随着子盒子一个个脱标，两个父盒子高度最终都减少为0（都是从浏览器顶端开始算的高度），最后子盒子又都左浮往左边按序移动，导致整体子盒子都排在一行内。

需求：让所有子盒子在各自的父盒子内左浮动，第二个父盒子里面的子盒子不跑到第一个子盒子的同一行内。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动的方式一</title>
	<style type="text/css">
		/*清除默认边距*/
		body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin: 0;
			padding: 0;
		}

		.fbox1{
			background-color: pink;
		}
		.fbox1 div{
			width: 100px;
			height: 100px;
			border: solid;
			box-sizing: border-box;
			background-color: skyblue;
			float: left;
		}

		.fbox2{
			background-color: green;
		}
		.fbox2 div{
			width: 100px;
			height: 100px;
			border: solid;
			box-sizing: border-box; /*防止增加盒子边框宽度或者内边距后使元素宽高变化。*/
			background-color: yellow;
			float: left;
		}
	</style>
</head>
<body>
	<div class="fbox1">
		<div class="fbox1_sbox1">fbox1_sbox1</div>
		<div class="fbox1_sbox2">fbox1_sbox2</div>
		<div class="fbox1_sbox3">fbox1_sbox3</div>
	</div>
	<div class="fbox2">
		<div class="fbox2_sbox1">fbox2_sbox1</div>
		<div class="fbox2_sbox2">fbox2_sbox2</div>
		<div class="fbox2_sbox3">fbox2_sbox3</div>
	</div>
</body>
</html>

解决方法一：设置前一个父盒子高度的方法清除浮动

第一个父盒子fbox1设置高度为其最高子盒子的高度。

缺点：但是企业开发中能不写高度就不写，所以此方式很少使用，不推荐。

例子中添加如下样式：

1
2
3

.fbox1{
    height: 100px;
}

解决方法二：clear 方法清除浮动

clear 属性定义了元素的左边或者右边上不允许出现浮动的子元素。如果给浮动元素的父盒子声明左边或右边清除，那么它里面的浮动元素就只会在该父盒子中浮动，并且该父盒子前面的其他盒子的内容（即使是浮动子元素）挡住向上移动。即本例子中fbox2的高度虽然也为0，但是是从box1的下边框开始算的。

可能的值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

例子中添加如下样式：

1
2
3

.fbox2{
	clear: both;
}

缺点：清除浮动的元素不能设置margin，比如box2设置了clear: both;，于是box2的margin就失效了。