帝王谷资源网 Design By www.wdxyy.com
关于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,这样也就达到了预期效果。
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,这样也就达到了预期效果。
标签:
CSS,clear属性
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月07日
2024年10月07日
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】
- 景冈山.1996-我的眼里只有你【大地唱片】【WAV+CUE】
- 群星《八戒 电影原声带》[320K/MP3][188.97MB]
- 群星《我的阿勒泰 影视原声带》[320K/MP3][139.47MB]
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】
- 群星.2008-本色·百代音乐人创作专辑【EMI百代】【WAV+CUE】
- 群星.2001-同步过冬AVCD【环球】【WAV+CUE】
- 群星.2020-同步过冬2020冀待晴空【环球】【WAV+CUE】
- 沈雁.1986-四季(2012梦田复刻版)【白云唱片】【WAV+CUE】
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[FLAC/分轨][257.88MB]
- 《国语老歌 怀旧篇 3CD》[WAV/分轨][1.6GB]