CSS:闭合元素和波动元素的区别

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

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

提醒:本文并不是实例教程,而是对闭合波动元素的方式在某个特殊状况下的状况的探讨,涉及到float、clear、overflow、:after等专业知识,初学者勿入。

float特性在网页页面排版上十分有效,可是也带来许多难题。最多见的便是波动元素的闭合难题。
假如1个沒有设置高宽比的不波动元素的子元素波动,则该元素的高宽比不容易包含波动子元素的高宽比,而只会包括其內部不波动元素的高宽比,由于波动元素不属于基本流向,它摆脱了文本文档流。因而假如要元素可以全自动包括波动子元素,则必须闭合波动元素。
现阶段较为常见的有3种方式:
运用波动子元素后的元素消除波动(包含加上1个空的元素以消除波动)。 应用:after伪元素,在元素最终插进消除。 为元素设置overflow特性除“visible”以外的值。
也有1个方式可使元素自融入高宽比:
波动元素,波动的元素会包括波动的子孙后代元素。
以下编码,其显示信息如图1所示。
提醒:所列编码只是重要编码,详细编码请查询示例网页页面。

CSS:
p,
div
{
margin
:5px;
}

.wrap
{
width
:440px;
margin
:10px;
clear
:both;
}

.div1,
.div2p
{
float
:left;
width
:80px;
margin
:8px;
display
:inline;
}


XHTML:
<divclass="wrap">
<divclass="div1">div1,波动</div>
<divclass="div2">
<pclass="div2p">div2内p1</p>
<pclass="div2p">div2内p2</p>
<pclass="div2p3">div2内p3,不波动</p>
</div>
<divclass="div3">div3,不波动</div>
</div>
提醒:截图是Firefox2.0(下列简称FF)中的实际效果,如无独特申明,则表明在WindowsIE7.0(下列简称IE)、Opera9.2(下列简称Op)、Safari3.0(下列简称Sa)中实际效果同样。

图1:波动元素与子元素波动的元素

假如对.div2p提升CSS:
.div2p{
......
clear
:left;
}

因为“clear:left”含意为:不容许本元素左侧有波动框,而div1也是波动元素,因而,p1和p2下移到了div1的下面,如图2所示。
图2:不波动的元素内的波动子元素设置“clear:left”后的实际效果

而在IE中,全部div2都将下移到div1下,如图3所示。
图3:不波动的元素内的波动子元素设置“clear:left”后IE的显示信息

由图3能够发现,尽管在图1中IE正确地显示信息了外溢的元素,可是,针对考虑了layout的wrap,IE依然会拓展最外层的高宽比,以容下波动元素。

闭合波动元素方式1
此时,div2的高宽比只包含其内未波动元素的高宽比,因而应用第1种方式闭合波动元素,为波动元素后边的元素p3设置clear特性:
.div2p3{
clear
:left;
}

此时显示信息如图4所示,在IE中如图5所示。
图4:p3消除波动后的实际效果

图5:p3消除波动后IE内的实际效果

(啊!杰出的IE,竟然多出来与div2的margin1样多的空隙。==b)
此时假如为div2提升左侧距(原设置为margin:5px):
.div2{
......
margin-left
:120px;
}

则显示信息如图6所示,在IE中如图7所示。
图6:提升左侧距后的实际效果

图7:p提升左侧距后IE内的实际效果

至此的实际效果,是上下2栏合理布局常见的方式,左栏固定不动宽度,右栏不设置宽度以求能自融入。

闭合波动元素方式2
尝试方式2,运用:after消除波动:
.div2:after{
content
:".";
display
:block;
height
:0;
clear
:both;
visibility
:hidden;
}

显示信息实际效果如图8所示。(IE不适用,无需试了。==b)
图8:应用:after消除波动

能够看到div2内的p3沒有消除波动,部位仍在div2的顶端。
提升div2的左侧距,显示信息如图9所示。
.div2{
margin-left
:120px;
}

图9:提升div2的左侧距

不难看出应用:after消除波动,不合适于波动元素后边也有不波动元素的状况。
闭合波动元素方式3
尝试方式3,应用overflow特性:
.div2{
overflow
:auto;
height
:100%;/*对于ie6*/
}

此时,最繁华的状况出現了:
图10:FF的实际效果

图11:Op和Sa的实际效果

图12:IE的实际效果(注:假如用IE6,实际效果也不1样,==|||)

最先,div2的宽度收拢到div1的右侧了,或许这恰好是期待的結果?
更繁华的在后边,提升div2的margin-left:
.div2{
margin-left
:120px;
}

图13:FF的实际效果

图14:Op和Sa的实际效果

图15:IE的实际效果(注:假如用IE6,实际效果也不1样,==|||)

全是margin-left惹的祸,去掉margin-left:
.div2{
margin-left
:0;
}

终究贴近统1了。
图16:去掉margin-left的实际效果

图17:去掉margin-left在IE内的实际效果

不难看出,overflow還是有很大局限性的。
可是导致FF、Op和Sa的显示信息結果的缘故又是甚么呢?
波动
div2波动,波动元素的高宽比会包括其內部的波动元素。
这类方式的局限性便是,div2波动后宽度会被缩小,因而务必给它1个宽度值,可是这样就没法自融入宽度。
.div2{
float
:left;
}

.div3
{
clear
:both;
}

实际效果如图18所示。
图18:波动div2

div2的波动,还会导致wrap的高宽比难题,因而必须div3消除波动。
由这个事例能够发现,因为div2的波动,其内的p元素消除波动,并沒有遭受div1的危害,因而,处理因为前2种方式中p1和p2降低到div1的高宽比之下的方式之1,能够将p1和p2外面套1个波动的div,自然这将会危害到构造,还必须融合实际状况来决策。
上一篇:H1的部位对SEO的危害 返回下一篇:没有了