CSS clear特性给float带来哪些危害

日期:2021-03-07 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

有关clear特性的界定参照:W3School 在阅读文章W3School有关內容时1定要用心,用心,细心,细心阅读文章“表明”一部分:“假如申明为左侧或右侧消除,会使元素的上外边框界限恰好在该旁边波动元素的下外边距界限之下”。
Ok, 下面举例表明下clear特性究竟给float(clear经常和float融合应用)带来哪些危害:

HTML片断1:

拷贝编码
编码以下:

#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片断2:在HTML片断1的基本上加上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中最高的高宽比1样)。

剖析:

子DIV(#son3)应用了clear特性,这样其上外边框在float元素(#son1,#son2)下外边框的下面,由于子DIV#son3要占文本文档流,因此父DIV迫不得已提升高宽比来容下子DIV#son3,这样也就做到了预期实际效果。