DIV+CSS布局CSS浮动float属性详解.docVIP

DIV CSS布局：CSS浮动float属性详解在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。我们来看看float属性基本释义：该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。float属性的参数： none：对象不浮动left：对象浮在左边right：对象浮在右边下面我们通过一些测试来了解可能出现的一些情况，如果float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如下图： 我们看下面的运行效果： Source Code to Run [] !DOCTYPE html PUBLIC -//W3C//DTD XHTML1.0 Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd htmlxmlns=/1999/xhtml head metahttp-equiv=Content-Type content=text/html; charset=gb2312 /title52CSS/title style type=text/css#content_a {width:200px; height:80px; border:1px solid #000;margin:10px; background:#ccc;} #content_b {width:200px; height:80px;border:1px solid #000; margin:10px; background:#999;} /style/head body div id=content_a52CSS.com这是第一个DIV/div div id=content_b52CSS.com这是第二个DIV/div /body /html ????[ 可先修改部分代码 再运行查看效果 ] 我们对content_a应用向左的浮动。而content_b不应用任何浮动。 Source Code to Run [] !DOCTYPE html PUBLIC -//W3C//DTD XHTML1.0 Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd htmlxmlns=/1999/xhtml head metahttp-equiv=Content-Type content=text/html; charset=gb2312 /title52CSS/title style type=text/css#content_a {width:200px; height:80px; float:left; border:1px solid#000; margin:10px; background:#ccc;} #content_b {width:200px;height:80px; border:1px solid #000; margin:10px; background:#999;}/style /head body divid=content_a52CSS.com 这是第一个DIV 向左浮动/div divid=content_b52CSS.com 这是第二个DIV 不应用浮动/div /body/html ????[ 可先修改部分代码 再运行查看效果 ] 我们看在IE6中的效果： 我们看在FF中的效果： 在IE中，对content_a应用向左的浮动后，content_a向左浮动，content_b在水平方向仅跟着它的后面。在FF中，对content_a应用向左的浮动后，content_b在水平方向容器不可见，只留下了文字。这是由于未清除浮动所造成的现象，关于清除浮动，可以参考这里：/article.asp?id=132 （overflow:auto;）这就是IE与FF对此种情况的不同解决，我们在实际布局中，应该避免这样的情况发生。我们同时对这两个容器应用向左的浮动看看发生的现象。 Source Code to Run [] !DOCTYPE html PUBLIC -//W3C//DTD XHTML1.0 Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd htmlxmlns=/1999/