带来一篇Div+CSS教程：怎样闭合浮动元素？
最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。依照CSS标准，浮动元素（floats）会被移出文档流，不会影响到块状盒子的结构而只会影响内联盒子（一般是文本）的分列。因而当其高度超越包括容器时，一样平常父容器不会主动伸长以闭合浮动元素。可是偶然我们却必要这类主动闭合举动，详细怎样处置呢？
有一种做法就是在父容器内再拔出一个分外的标签，并令其扫除浮动（clear）以撑年夜父容器。这类办法扫瞄器兼容性好，没有甚么成绩，弱点就是必要分外的（并且一般是无语义的）标签，以是我团体不年夜喜好。
厥后又有了一种新的体例，利用:after伪类静态的嵌进一个用于扫除浮动的元素，这类办法和上一种道理一样，分歧的只是把这个分外的内容用CSS天生，但思索到IE不撑持:after不能不做了很多的hack。这类办法兼容性一样平常，但经由各类hack也能够对付分歧扫瞄器了，同时又能够包管html对照洁净，以是用得仍是对照多的。
再厥后又有人发明将父容器的overflow设为除visible以外的值就能够在尺度兼容扫瞄器中闭合浮动元素，IE天然又是不撑持的，以是这类办法和上一种办法一样都对IE做了分歧处置（详细就是触发layout），分歧的就是overflow没有:after伪类那末贫苦了，弱点也有，overflow大概会发生一些小抵触。
在利用overflow之前另有过一种利用float的办法，就是让父容器也浮动，这使用到了浮动元素的一个特征――浮动元素会闭合浮动元素。这类体例在IE/Win和尺度兼容扫瞄器中都有较好的效果，但弱点也很分明――父容器一定想浮动就浮动的了，究竟浮动是一种对照特别的举动，偶然结构不同意其浮动也很一般。利用float固然在IE和尺度兼容扫瞄器中都能闭合浮动元素，但道理倒是分歧的，IE/Win中float触发了layout因此闭合了浮动，而在尺度兼容扫瞄器中，float实在和上一种办法中的overflow道理一样，发生了一个“块级格局化局限”――这是CSS标准中提到的一种征象，它常常具有某种自力性，特征之一就是会主动闭合外部的浮动元素。
依照标准，以下范例的元素会发生一个块级格局化局限：
●浮动元素，left大概right皆可。
●相对定位的元素。
●inline-block元素，不外这个gecko今朝不撑持。
●table-cell范例元素，实在table,table-head-group,table-row甚么的也都能够，另有inline-table（gecko不撑持）也一样，由于他们城市直接发生一个匿名的table-cell。
●overflow取值非visible的元素。
以是，本来在尺度兼容扫瞄器中我们也能够有这么多的办法闭合一个浮动元素，并且只必要CSS，无需其他。顺带说一下以上除overflow，其他都有一个附加效果就是主动压缩父容器宽度。
而关于IE/Win，它有一套本人的系统，就是layout，具有layout的元素会主动闭合浮动元素，再来看看触发layout的CSS属性，会发明和下面的块级格局化局限有良多相似的地方：
●浮动元素
●相对定位元素
●display:inline-block
●zoom
●width/height
●overflow/overflow-x/overflow-y
●max/min-width/height
以下去看IE中闭合浮动元素的办法也很多，天然也都有其范围性，要末有附带效果，要末利用的长短尺度属性（没法经由过程考证）。
还要提一点的是display:inline-block，这个属性对IE而言自己没甚么用，实践效果只是给一个元素公开增加了layout，可是尺度兼容扫瞄器是认得这个属性的，以是要不影响这些扫瞄器，必要将display设回默许。这里IE有一个bug，假如先界说了display:inline-block，然后再将display设回block（这两个display要前后放在两个CSS声明中才无效果），那末layout不会消散，同时也不会影响其他扫瞄器，以是今朝来讲，这也算一个不错的触发layout的办法：
.gainlayout{display:inline-block;}
.gainlayout{display:block;}
以是要跨扫瞄器闭合浮动元素，能够选择的体例仍是良多的，怎样搭配利用这些CSS属性就要详细情形详细剖析了，天真使用前提正文也很有需要，如果其实不可我们回过火来另有clear能够用嘛。
一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。
页:
[1]