Clear 清除浮动
程序员文章站
2024-01-29 22:50:46
...
Clear 清除浮动
Clear 清除浮动
Left 清除左浮动
Right 清除右浮动
Both 清除左右浮动
注：清除浮动和本身有没有浮动没有关系。
#样例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Clear清除浮动</title>
<meta charset="UTF-8" />
<style>
.one{
width:300px;
height:300px;
background:orange;
/*将div左浮动，左浮动之后将脱离标准文档流*/
float:left;
}
.two{
width:300px;
height:300px;
background:cyan;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
结果如下：
橘色的div将浮动起来，脱离标准文档流，青色的div将到原橘色div的位置，从而被橘色的div覆盖。
如要要解决此问题需清除左浮动，代码如下：
.two{
width:300px;
height:300px;
background:cyan;
/*清除浮动*/
clear:left;
}
结果显示如下：
上一篇： 理解为何需要清除浮动及清除浮动的方法
下一篇： 关于浮动的注意