整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
例
指定段落的左侧或右侧不允许浮动的元素：
img
{
float:left;
}
p.clear
{
clear:both;
}
属性定义及使用说明
clear属性指定段落的左侧或右侧不允许浮动的元素。
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.clear="left" |
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| clear | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
属性值
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
动是我们前端布局的重要属性，而浮动产生的高度塌陷问题也一直伴随在我们布局过程中。众所周知，clear：both是浮动产生高度塌陷的克星，但你真的认识clear么。
在技术文档中对于clear的值是这样解说的：
我们在实例中看一下：
首先：在一个大盒子里放4个p标签，让p标签全部左浮动，此时会产生高度塌陷问题
HTML代码如下：
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</body>
css代码如下：
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 3px solid #f00;
}
.box p{
width: 100px;
background-color: pink;
border: 3px solid #333;
float: left;
}
p:nth-of-type(1){
height: 60px;
background-color: yellow;
}
p:nth-of-type(2){
height: 100px;
background-color: orange;
}
p:nth-of-type(3){
height: 140px;
background-color: green;
}
p:nth-of-type(4){
height: 180px;
background-color: blue;
}
</style>
在前两个p标签之后添加一个空的块元素div，给这个块元素clear：left属性
HTML代码如下：
<body>
<div>
<p>1</p>
<p>2</p>
<div></div>
<p>3</p>
<p>4</p>
</div>
</body>
css代码如下：
.clear{ clear: left; }
看起来是实现了元素左侧不允许有浮动，但如果给第2个p标签一个右浮动
css代码如下：
p:nth-of-type(2){
float: right;
height: 100px;
background-color: orange;
}
会发现父元素只撑开了第一个左浮动的p标签的宽度。
此时，把中间的div元素clear值改成right，我们再来看
css代码如下：
.clear{ clear: right; }
增加第一个p标签的高度后
css代码如下：
p:nth-of-type(1){
height: 200px;
background-color: yellow;
}
按照文档中说明来看，应该是元素右侧不能有浮动元素，但第3个和第4个p标签一直都是没有变化的，相反，元素之前的右浮动元素撑开了父元素的高度。
再看看clear值为both，在值为both时修改第一个p元素的高度
css代码如下：
.clear{ clear: both; }
这种情况下，无论之前的是左浮动还是右浮动都可以清除掉
到这里，我们发现clear是清除掉元素之前的浮动元素
clear：left 清除这个元素之前元素的左浮动
clear：right 清除这个元素之前元素的右浮动
clear：both 清除这个元素之前元素的左浮动和右浮动
最后注意：clear属性只对块元素有效哦！！！
页面布局中，有两个非常常用的CSS属性。它们巧妙的控制着块级元素们之间的位置，灵活的让块级元素在一行内显示或者另起一行。说到这里，相信大家已经猜出来了，这两个属性就是控制块级元素浮动的属性。整个页面布局过程中，浮动属性的使用频率是最高的。今天，小海老师就来带领大家一同认识这两个神奇的CSS属性。
承接文章：发挥个人的优势，踏踏实实的学习前端开发，小海为你传授学习心得
技术等级：初级 | 适合前端开发的初学者阅读学习。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
一、浮动属性：
CSS技术使用float属性来实现块级元素的浮动效果。
CSS技术使用float属性实现浮动效果
该属性可以有下列取值：
left，控制块级元素左浮动。
right，控制块级元素右浮动。
属性说明：我们都知道，块级元素之间默认情况下是独占一行的。也就是说，两个在代码中紧密相连的块级元素，它们的摆放位置是一个在上一行，另一个在下一行。尽管通过width和height属性为块级元素设置了大小，使得块级元素无法占满整个行，但是块级元素右侧空余的位置仍然不允许出现任何内容。
让我们一同来看下列实例：
HTML代码如下所示：
<div id=”box01”></box>
<div id=”box02”></box>
CSS代码如下所示：
#box01,#box02{
width:200px; height:100px;
}
#box01{background-color:#ff5857;}
#box02{background-color:#5857ff;}
上述代码的运行结果如下图所示，这张图为我们展示了两个块级元素默认的位置摆放。
展示两个块级元素的默认位置
如果我想让两个块级元素在一行内显示该如何实现呢？这就需要float属性登场了。
将#box01的CSS代码中添加如下属性：float:left，会发生什么情况呢？同学们实践操作一下，我们会发现，屏幕中就只剩下红色的块级元素了。那蓝色的#box02去哪里了呢？其实#box02响应了#box01浮动的号召，和#box01一同出现在同一行了，只是被压在了红色的#box01的下面。
解决方法就是让蓝色的#box02也添加上 float:left的属性。这样，两个块级元素就可以共同出现在一行了。下图为我们展示了这样的效果。
展示两个块级元素的左浮动位置
下面让我们再看一个实例，这个实例中我们为两个块级元素添加一个容器。
HTML代码如下所示：
<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>
我们设置容器#box的宽度为400px。内部的两个块级元素：.boxLeft的宽度设置为150px；.boxRight的宽度设置为100px。要求让这两个内部的块级元素在一行内显示，并且分布到容器的两端。
CSS代码如下所示：
#box{
width:400px; height:100px;
background-color:#cccccc;
}
#box .boxLeft{
width:150px; height:100px;
background-color:#ff5857;
float:left;
}
#box .boxRight{
width:100px; height:100px;
background-color:# 5857 ff;
float:right;
}
我们可以看到，在.boxRight对象上，我们添加了float:right的CSS属性，让这个块级元素发生了右浮动，则该元素跑到了容器的最右侧。下图为我们展示了这样的效果。
展示两个块级元素的左右浮动位置
浮动属性的使用结论：
若希望多个块级元素在一行内显示，则这几个块级元素都要具备float浮动属性。
二、清除浮动属性：
CSS技术使用clear属性来实现块级元素的清除浮动效果。
CSS技术使用clear属性设置清除浮动效果
该属性可以有下列取值：
left，清除块级元素的左浮动效果。
right，清除块级元素的右浮动效果。
both，清除块级元素的两端浮动效果。
属性说明：根据上面的float属性的使用，我们可想而知，一个紧跟在具有浮动属性的块级元素后面的块级元素，即使它不想和它前面的块级元素在一行内显示，也会受到前面块级元素浮动属性的影响，被压在前面块级元素的下方。
解决这个问题，可以对不希望和前面块级元素在同一行显示的块级元素使用清除浮动属性。
下面让我们来看这个实例：
HTML代码如下所示：
<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>
CSS代码如下所示（#box .boxRIght）：
#box .boxRight{
width:100px; height:100px;
background-color:# 5857ff;
clear:left;
}
因为.boxRight具备clear:left属性，所以即使.boxLeft使用了float:left属性，它们也仍旧分布在两行，不会在同一行显示。就好像没有过使用任何浮动效果似的。
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
结合前面所学的CSS知识，使用今天的浮动属性，可以做一个简单的导航栏。那么下一篇文章中，小海老师会带领大家一同利用最近的所学，做一个水平放置的导航栏。效果非常酷炫，希望正在学习前端开发的同学们千万不要错过。
*请认真填写需求信息，我们会在24小时内与您取得联系。
