您现在的位置是：网站首页> 编程资料编程资料
CSS：闭合元素和浮动元素的差别_CSS教程_CSS_网页制作_
2021-09-10
1873人已围观
简介 提示：本文不是教程，而是对闭合浮动元素的方法在某个特定情况下的现象的讨论，涉及float、clear、overflow、:after等知识，新手勿入。 float属性在页面排版上非常有用，但是也带来很多问题。最常见的就是浮动元素的闭合问题。 如果一个没有设定高度的不浮动元素的子元
提示：本文不是教程，而是对闭合浮动元素的方法在某个特定情况下的现象的讨论，涉及float、clear、overflow、:after等知识，新手勿入。
float属性在页面排版上非常有用，但是也带来很多问题。最常见的就是浮动元素的闭合问题。
如果一个没有设定高度的不浮动元素的子元素浮动，则该元素的高度不会包括浮动子元素的高度，而只会包含其内部不浮动元素的高度，因为浮动元素不属于常规流向，它脱离了文档流。因此如果要元素能够自动包含浮动子元素，则需要闭合浮动元素。
目前比较常用的有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内p1p>
<pclass="div2p">div2内p2p>
<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的margin一样多的间隙。==b）
此时如果为div2增加左边距（原设定为margin:5px）：
提示：
本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
float属性在页面排版上非常有用，但是也带来很多问题。最常见的就是浮动元素的闭合问题。
如果一个没有设定高度的不浮动元素的子元素浮动，则该元素的高度不会包括浮动子元素的高度，而只会包含其内部不浮动元素的高度，因为浮动元素不属于常规流向，它脱离了文档流。因此如果要元素能够自动包含浮动子元素，则需要闭合浮动元素。
目前比较常用的有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内p1p><pclass="div2p">div2内p2p><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的margin一样多的间隙。==b）
此时如果为div2增加左边距（原设定为margin:5px）：
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
相关内容
- 理解(X)HTML的文档结构_CSS教程_CSS_网页制作_
- CSS教程：理解继承属性及应用_CSS教程_CSS_网页制作_
- CSS教程：认识层叠规则互相作用_CSS教程_CSS_网页制作_
- CSS网页布局：关于定位（position）_CSS布局实例_CSS_网页制作_
- CSS简单实现网页悬浮效果（对联广告）_CSS教程_CSS_网页制作_
- CSS教程：行高line-height属性(1)_CSS教程_CSS_网页制作_
- css制作有立体效果的表格_CSS教程_CSS_网页制作_
- HTML验证的好处？_CSS教程_CSS_网页制作_
- 英文教程：鼠标悬停（hover）效果_CSS教程_CSS_网页制作_
- dl,dt,dd标记在网页中要充分利用_CSS教程_CSS_网页制作_
