学习CSS之clear属性

关于clear属性的定义参考:W3School  在阅读W3School相关内容时一定要认真,认真,仔细,仔细阅读“说明”部分:“如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下”。

Ok, 下面举例说明下clear属性到底给float(clear常常和float结合使用)带来哪些影响:

HTML片段一:

#parentDiv
{
  background: #00ff00;
}
.ret
{
  width: 100px;
  height: 200px;
  background: #0000ff;
}
.fl
{
  float: left;
}
.fr
{
  float: right;
}


<div id="parentDiv">
  <div id=“son1” class="fl ret">
    <h2>Left</h2>
  </div>
  <div id=”son2" class="fr ret" >
    <h2>Right</h2>
  </div>
</div>

效果:由于float导致两个子DIV(#son1, #son2)不占文档流,所以虽然两个子DIV的高为200PX,但是父DIV#parentDiv的高度是0PX。


问题:有时候我们需要父DIV的高度正好容纳下所有的子DIV。在这种情况下我们可以使用clear属性了。

HTML片段二:在HTML片段一的基础上添加CSS class:clear,给父DIV添加个子DIV(#son3)

#parentDiv
{
  background: #00ff00;
}
.ret
{
  width: 100px;
  height: 200px;
  background: #0000ff;
}
.fl
{
  float: left;
}
.fr
{
  float: right;
}

.clear

{

  clear: both;

}

<div id="parentDiv">
  <div id=“son1” class="fl ret">
    <h2>Left</h2>
  </div>
  <div id=”son2" class="fr ret" >
    <h2>Right</h2>
  </div>

  <div id="son3" class=“clear”>

 </div>

</div>

效果:这种情况下父DIV的高度是200PX(和子DIV中最高的高度一样)。

分析

子DIV(#son3)使用了clear属性,这样其上外边框在float元素(#son1,#son2)下外边框的下面,因为子DIV#son3要占文档流,所以父DIV不得不增加高度来容纳子DIV#son3,这样也就达到了预期效果。


欢迎大家分享学习经验微笑




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值