CSSfloat浮动属性教程.docx

CSS float 浮动属性 本篇主要介绍float属性：定义元素朝哪个方向浮动。 目录： 1.? HYPERLINK /polk6/archive/2013/07/25/3142187.html \l Menu1Layout 页面布局方式：介绍文档流、浮动层以及float属性。 2.? HYPERLINK /polk6/archive/2013/07/25/3142187.html \l Menu2-floatLeft float:left?：介绍float为 left 时的布局方式。 3.? HYPERLINK /polk6/archive/2013/07/25/3142187.html \l Menu3-floatRight float:right?：介绍float为 right 时的布局方式。 4.? HYPERLINK /polk6/archive/2013/07/25/3142187.html \l Menu4-ElementFloat 相邻元素含有float属性：介绍相邻元素含有float属性时的布局方式。 ? 1. 页面布局方式 页面布局方式，主要包含：文档流、浮动层、float属性。 1.1 文档流 HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。 ? 1.2 浮动层 浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。 而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。 ? 1.3 float 属性介绍 　　① left ：元素向左浮动。 　　② right ：元素向右浮动。 　　③ none ：默认值。 　　④ inherit ：从父元素继承float属性。 ? 1.4 示例 ? !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head title2.3-float属性/title style type=text/css #a { background-color:Red; height:50px; width:100px; } #b { background-color:Yellow; height:50px; width:200px; } #c { background-color:Blue; height:50px; width:300px; } #d { background-color:Gray; height:50px; width:400px; } /style /head body div id=a div-a/div div id=bdiv-b/div div id=cdiv-c/div input type=text value=input1 / input type=text value=input2 / input type=text value=input3 / div id=ddiv-d/div input type=text value=input4 / /body /html ? 2. float:left 说明：元素向左浮动。 2.1 代码变更 input2 添加：float:left div-b 添加：float:left div-d?添加：float:left 2.2 变更后视图 　　① 浏览器的宽度“不够长”时 　　　　 　　② 浏览器的宽度够长时 　　　　 2.3 结论 当前元素分类(float:left)下一个紧邻元素分类(不含float)结论块级元素(a)块级元素(b)b会填充a遗留下来的空间，a会和b发生重叠，a的图层在上面。内联元素(b)b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。