style中的clear:both-阿里云开发者社区

开发者社区> 开发与运维> 正文

style中的clear:both

简介: style中的clear:both 在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。

style中的clear:both

CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both;

CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。

比如:

<p style="float:left;width:200px;">这个是第1列,</p>

<p style="float:right;width:400px;">这个是第2列,</p>

<p>这个是第3列。</p>

如果不用清除浮动,那么第3列文字就会和第12列文字在一起 ,所以我们在第3个这列加一个清除浮动 clear:both;

<p style="float:left;width:200px;">这个是第1列,</p>

<p style="float:left;width:400px;">这个是第2列,</p>

<p style="clear:left;">这个是第3列。</p>

通常,我们往往会将“清除浮动”单独定义一个CSS样式,如:

.clear {

clear: both;

}

然后使用<div class="clear"></div>来专门进行“清除浮动”。

原文:

http://blog.sina.com.cn/s/blog_7f854a010100re65.html

示例

<style>

.clear10{clear: both; height:10px; overflow:hidden;}

.yao{float:left;width:100px;}

</style>

<div class="yao">大家好</div>

<div class="yao">我也很好</div>

<div class="clear10"></div>

<div class="yao">大家好</div>

原文:

http://zhidao.baidu.com/question/157056984.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章