【CSS】【10】CSS盒子clear属性和高度-阿里云开发者社区

开发者社区> 云原生> 正文
登录阅读全文

【CSS】【10】CSS盒子clear属性和高度

简介:
从《【CSS】【9】CSS盒子的浮动》知道,当盒子设置为浮动时,也意味着它从标准流脱离出来,后面在标准流的元素会占据原盒子所在的空间,如下图所示:

230648211.jpg

一、盒子的clear属性:

   上图中Box-1和Box-2均设置为向左浮动,Box-3设置为向右浮动,由于三个盒子均设置了浮动,所以三者均从标准流中脱离出来,所以文本(粉红色背景的文字)段落占据了原来Box-1、Box-2和Box-3盒子的空间,形成文字围绕着蓝色盒子布局。但有时候我们不想让文本受到浮动盒子的影响,想达到下面的效果,该如何办呢?

230700289.jpg

   上图可以看出文本(粉红色背景的文字)不再围绕着Box-1和Box-2排列,但依旧围绕着Box-3排列,实现其实很简单,只需要对P标记选择器的clear属性值设置为left即可。

.father p
{
    border:1px dashed #111111;
    background-color:#ffbaff;
clear:left;
}

由于文本所属的盒子在P标记中,所以clear设置为left就意味着文本不再受向左浮动盒子的影响,从而P标记内的文本不再围绕着Box-1和Box-2排列。若同时也想使文本不再围绕着Box-3排列该如何办呢?只需要把clear设置为both即可。

.father p
{
    border:1px dashed #111111;
    background-color:#ffbaff;
clear:both;
}

效果如下:

230714546.jpg

二、盒子的高度问题:

1、存在如下的HTML

<div class="father">
  <div class="son1">Box-1<br/>Box-1</div>
  <div class="son2">Box-2</div>
  <div class="son3">Box-3<br/>Box-3<br/>Box-3</div>
</div>

父块div中包括三个子div,这三个子div均设置为浮动,效果图如下:

230725846.jpg

从图中明显可以看出三个子div由于浮动都脱离出标准流,所以没有在父div中显示。但我们希望父div能自动适应子div的高度,即如下效果:

230737111.jpg

2、如何做到的呢?

其实这里没有一个标准的方法,使用clear属性也可以做到这点。

<div class="father">
   <div class="son1">Box-1<br/>Box-1</div>
   <div class="son2">Box-2</div>
   <div class="son3">Box-3<br/>Box-3<br/>Box-3</div>
<div class="clear"></div>
</div>

增加一个子div,该div并无内容显示,同时为其设置clear类别选择器,使其clear属性消除左右浮动影响:

.father .clear
{
    margin:0px;
    padding:0px;
    border:0px;
clear:both;
}

3、可以这样理解,相当于把文本(粉红色背景的文字)去掉,只剩下一个空盒子,同时这个空盒子消除了左右浮动的影响,把父div容器撑大了,从而可以容纳三个蓝色的子div盒子。




     本文转自qingkechina 51CTO博客,原文链接:http://blog.51cto.com/qingkechina/1261753,如需转载请自行联系原作者




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

分享: