HTML&CSS基础-清除浮动
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.查看浮动效果
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title> <style>
.box1{
width: 100px;
height: 100px;
background-color: red;
/**
* 设置box1相左浮动
*/
float: left;
} .box2{
width: 200px;
height: 200px;
background-color: yellow;
/**
* 设置box2相右浮动
*/
float: right;
} .box3{
width: 300px;
height: 300px;
background-color: deeppink;
} </style>
</head>
<body> <div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2>.浏览器打开以上代码渲染结果
二.查看清除浮动效果
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title> <style>
.box1{
width: 100px;
height: 100px;
background-color: red;
/**
* 设置box1相左浮动
*/
float: left;
} .box2{
width: 200px;
height: 200px;
background-color: yellow;
/**
* 设置box2相右浮动
*/
float: right;
} .box3{
width: 300px;
height: 300px;
background-color: deeppink;
/**
* 由于受到box1和box2浮动的影响，整体向上移动300px
* 我们有时希望清除掉其它元素浮动对当前元素产生的影响，这时可以使用clear来完成功能。
*
* clear可以用来清除其它浮动元素对当前元素的影响,它有以下可选值:
* none:
* 默认值，不清楚浮动
* left:
* 清除左侧浮动元素对当前元素的影响
* right:
* 清除右侧浮动元素对当前元素的影响
* both:
* 清除两侧浮动元素对当前元素的影响，明确的说是清除对它影响最大的那个元素的浮动
*
* 案例如下:
* 清除box1的浮动对box3的影响，但是并没有清除box2浮动对box3的影响
* 清除浮动以后，元素会回到其他人元素浮动之前的位置。
*/
clear: left;
} </style>
</head>
<body> <div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2>.浏览器打开以上代码渲染结果
