在本教程中，我们将学习CSS Float和Clear属性。

布局示例

在下图中，我们有6个div，我们将更改其位置。

我们的页眉和页脚为蓝色。

然后，将容器放入浅灰色中。

在容器的侧面，我们还有4个div，分别为橙色，绿色，粉红色和黄色。

上述布局的HTML如下所示。

<div id="header">
	<p>id="header"</p>
</div>
<div id="container">
	<p>id="container"</p>
	<div id="div-1">
		<p>id="div-1"</p>
		<p>This is a sample paragraph.</p>
	</div>
	<div id="div-2">
		<p>id="div-2"</p>
		<p>This is a sample paragraph.</p>
	</div>
	<div id="div-3">
		<p>id="div-3"</p>
		<p>This is a sample paragraph.</p>
	</div>
	<div id="div-4">
		<p>id="div-4"</p>
		<p>This is a sample paragraph.</p>
	</div>
</div>
<div id="footer">
	<p>id="footer"</p>
</div>

float : left

当我们想将一个元素尽可能向左推时，我们将其float属性设置为left。

当一个元素设置为向左浮动时，其他元素将环绕其右边。

在以下示例中，我们将div-2设置为向左浮动。

#div-2 {
	float : left;
}

clear : left

如果我们不希望给定元素的任何元素向左浮动，则必须将clear属性设置为left。

在上面的示例中，我们将div-2的float属性设置为left，并且将div-3的clear属性设置为left。
这将使div-3出现在div-2下方。

#div-2 {
	float : left;
}

#div-3 {
	clear : left;
}

float : right

当我们想将一个元素尽可能向右推时，我们将其float属性设置为right。

当某个元素设置为向右浮动时，其他元素将环绕其左侧。

在以下示例中，我们将div-2设置为向右浮动。

#div-2 {
	float : right;
}

clear : right

如果我们不希望给定元素的任何元素向右浮动，则必须将clear属性设置为right。

在上面的示例中，我们将div-2的float属性设置为right，并将div-3的clear属性设置为right。
这将使div-3出现在div-2下方。

#div-2 {
	float : right;
}

#div-3 {
	clear : right;
}

clear : both

如果我们不希望任何元素都在元素的左右两侧浮动，则将其clear属性设置为both。

在下面的示例中，我们将div-1设置为向左浮动，将div-3设置为向右浮动，并将div-2设置为清除这两者。

#div-1 {
	float : left;
}

#div-2 : {
	clear : both;
}

#div-3 : {
	float : right;
}