站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: CSS clear属性给float带来哪些影响
搜索:
您的位置: 主页 > 教程 > 前端设计 > CSS > » 正文

CSS clear属性给float带来哪些影响

来源: 易采站长站

关于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,这样也就达到了预期效果。

最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -