DIV教程之CSS：闭合元素和浮动元素的不同
当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。提醒：本文不是教程，而是对闭合浮动元素的办法在某个特定情形下的征象的会商，触及float、clear、overflow、:after等常识，老手勿进。
float属性在页面排版上十分有效，可是也带来良多成绩。最多见的就是浮动元素的闭合成绩。
假如一个没有设定高度的不浮动元素的子元素浮动，则该元素的高度不会包含浮动子元素的高度，而只会包括其外部不浮动元素的高度，由于浮动元素不属于惯例流向，它离开了文档流。因而假如要元素可以主动包括浮动子元素，则必要闭合浮动元素。
今朝对照经常使用的有3种办法：
[*]使用浮动子元素后的元素扫除浮动（包含增加1个空的元素以扫除浮动）。
[*]利用:after伪元素，在元素最初拔出扫除。
[*]为元素设定overflow属性除“visible”以外的值。
另有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）中效果不异。
：浮动元素与子元素浮动的元素
假如对.div2p增添CSS：
.div2p{...}{
......
clear:left;
}
因为“clear:left”寄义为：不同意本元素右边有浮动框，而div1也是浮动元素，因而，p1和p2下移到了div1的上面，如所示。
：不浮动的元素内的浮动子元素设定“clear:left”后的效果
而在IE中，全部div2都将下移到div1下，如所示。
：不浮动的元素内的浮动子元素设定“clear:left”后IE的显现
由能够发明，固然在中IE准确地显现了溢出的元素，可是，关于动身了layout的wrap，IE仍然会扩大最外层的高度，以包容浮动元素。
闭合浮动元素办法1
此时，div2的高度只包含其内未浮动元素的高度，因而利用第1种办法闭合浮动元素，为浮动元素前面的元素p3设定clear属性：
.div2p3{...}{
clear:left;
}
此时显现如所示，在IE中如所示。
：p3扫除浮动后的效果
：p3扫除浮动后IE内的效果
（啊！巨大的IE，竟然多出来与div2的margin一样多的间隙。==b）
此时假如为div2增添右边距（原设定为margin:5px）：
.div2{...}{
......
margin-left:120px;
}
则显现如所示，在IE中如所示。
：增添右边距后的效果
：p增添右边距后IE内的效果
至此的效果，是摆布2栏结构经常使用的办法，左栏流动宽度，右栏不设定宽度以求能自顺应。
闭合浮动元素办法2
实验办法2，使用:after扫除浮动：
.div2:after{...}{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
显现效果如所示。（IE不撑持，不必试了。==b）
：利用:after扫除浮动
能够看到div2内的p3没有扫除浮动，地位仍在div2的顶端。
增添div2的右边距，显现如所示。
.div2{...}{
margin-left:120px;
}
：增添div2的右边距
因而可知利用:after扫除浮动，不合适于浮动元素前面另有不浮动元素的情形。
闭合浮动元素办法3
实验办法3，利用overflow属性：
.div2{...}{
overflow:auto;
+height:100%;/**//*针对ie6*/
}
此时，最热烈的情形呈现了：
0：FF的效果
1：Op和Sa的效果
2：IE的效果（注：假如用IE6，效果也纷歧样，==|||）
起首，div2的宽度压缩到div1的右侧了，大概这恰好是希冀的了局？
更热烈的在前面，增添div2的margin-left：
.div2{...}{
margin-left:120px;
}
3：FF的效果
4：Op和Sa的效果
5：IE的效果（注：假如用IE6，效果也纷歧样，==|||）
都是margin-left惹的祸，往失落margin-left：
.div2{...}{
margin-left:0;
}
终究靠近一致了。
6：往失落margin-left的效果
7：往失落margin-left在IE内的效果
因而可知，overflow仍是有很年夜范围性的。
可是形成FF、Op和Sa的显现了局的缘故原由又是甚么呢？
浮动
div2浮动，浮动元素的高度会包括其外部的浮动元素。
这类办法的范围性就是，div2浮动后宽度会被紧缩，因而必需给它一个宽度值，可是如许就没法自顺应宽度。
.div2{...}{
float:left;
}
.div3{...}{
clear:both;
}
效果如8所示。
8：浮动div2
div2的浮动，还会形成wrap的高度成绩，因而必要div3扫除浮动。
由这个例子能够发明，因为div2的浮动，其内的p元素扫除浮动，并没有遭到div1的影响，因而，办理因为前2种办法中p1和p2下落到div1的高度之下的办法之一，能够将p1和p2表面套1个浮动的div，固然这大概影响到布局，还必要分离详细情形来决意。
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。 直接用代码建立链接，如：可以直接输入<aherf=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。
页:
[1]