浮动与定位在网页设计中应用得很广泛，是两种主要布局方式的实现方法。
我们知道，网页上一般来说，块标签是自上而下的一块块堆叠，行内标签则在一行内从左到右依次并排，如果所有网页的都这样机械的排列着，也太单调了，所以有没有一个东西让标签内容脱离这种文档流呢，首先就可以考虑float。
float，使某元素浮动起来，可以把元素移到，比如浏览器边沿的左边或右边，看上去它们就像粘在边沿上一样，它下边的文本则会充斥在它的一边或者下面，如下例
<!DOCTYPE html><html> <head> <title>float test</title> <style type="text/CSS"> /*reset*/ body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,PRe,img{margin:0;padding:0;} .wrap{ width:300px; margin:0 auto; border:2px solid #30c13a; } .wrap .fl{ width:100px; float:left; background-color:#8cceff; } </style> </head> <body> <div class="wrap"> <p class="fl"> The Macintosh Classic is a personal </p> <p> It was the first Apple Macintosh sold under US$1,000. Production of the Classic was prompted by the success of the Macintosh Plus and the SE. </p> </div> </body></html>View Code
效果
float有三个值：left、right、none，向左、向右或者不使用浮动。上边是向左浮动（蓝色背景），跟在它后边p标签中的文本没给任何样式，本来两个p标签中的文本块会一上一下分段堆叠，加了float left后，下边p标签中的文本，就环绕在它周围，包括下边和右边。
一般我们在设置浮动时会给浮动块一个宽度，这样才能显示浮动的意义，如果任由其充满在其父元素中一整行就不需要浮动了，但是多的文本又会跑到浮动块的下边去，所以让两个块分开来更合理，可以对右边环绕的文本块加一个margin（或者再加一个padding），这个左边距至少要是浮动块的盒模型宽度（注意不是左边元素本身的width属性值，还包括了它的padding、border和margin），通常比这个宽度略大，比如这里可以给右边那个文本块设置：margin-left:110px; ，将两个块隔离开。
因为浮动脱离了html文档流，所以有时候浏览器在计算块的宽高时，没有将浮动的模块算在内，比如下边这样
<!DOCTYPE html><html> <head> <title>float test</title> <style type="text/css"> /*reset*/ body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img{margin:0;padding:0;} .wrap{ width:300px; margin:0 auto; border:2px solid #30c13a; } .wrap .fl{ width:100px; float:left; background-color:#8cceff; } </style> </head> <body> <div class="wrap"> <p class="main"> It was the first Apple Macintosh sold under US$1,000. Production of the Classic was prompted by the success of the Macintosh Plus and the SE. </p> <p class="fl"> The Macintosh Classic is a personal </p> </div> </body></html>View Code 效果
就是将上例中的浮动模块和右边的文本模块调换了位置，去掉了右边文本块的margin，外围的类为wrap的div明明将这个浮动块包在里边，但是网页上的border边框可以看出，高度的计算没有把它放在里边，浮动也跑到外边去了，因此浮动还要注意的是：如果要让B围绕A，且A浮动，在html代码的组织上，要把A模块的代码放在B模块之前，对于左或右均是如此。
浮动的一个常用的情形，就是水平导航条了。水平导航条有两种方式可以实现，例如下面一种，只要将li标签的display属性改为行内样式，即可让列表平铺，这步起核心作用，但是在了解盒模型我们知道，行内标签的加margin、padding对上下方向是无效的，这里只能让列表选项左右拉长，上下却不受控制，块级标签才行。
<ul> <li><a href="#">go</a></li> <li><a href="#">some</a></li> <li><a href="#">where</a></li> </ul> li {display:inline;}采用浮动可以解决这个问题。首选让列表中的a标签成为块级标签，然后向左浮动列表项就水平展示了，通常要先去掉列表前缀样式。
li{ list-style-type:none; } li a{ margin:5px; display:block; float:left; }浮动可能产生的问题：
1.元素的border穿浮动块而过
代码和效果
<!DOCTYPE html><html> <head> <title>float test</title> <style type="text/css"> /*reset*/ body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img{margin:0;padding:0;} .wrap{ width:400px; height:100px; margin:0 auto; border:2px solid #3c3c3c; } .wrap .banner{ font-size:120%; font-weight:normal; } .wrap .banner{ margin:5px; border: 2px dashed #30c13a; /*overflow:hidden;*/ } .wrap .fr{ float:right; width:100px; color:#fff; margin-left:10px; margin-right:10px; background-color:#c19132; } </style> </head> <body> <div class="wrap"> <div class="fr"> <ul> <li>Apple</li> <li>Google</li> <li>Microsoft</li> </ul> </div> <h1 class="banner"> Welcome To CSS World </h1> </div> </body></html>View Code 效果
添加overflow后
右上角，标题的边框穿过了浮动的列表，为消除这种因背景色或边框在浮动元素的下方出现的情形，需要使用overflow，我们知道overflow是文本溢出时采取的措施，比如hidden隐藏多出宽高范围的文本。具体说是，在.wrap .banner{...}中添加overflow:hidden即可，IE6可能还要加一个zoom:1;（这是一个神奇的IE属性，解决了好多IE显示问题~）
2. 在浮动元素周围环绕，但不需要
代码和效果
<!DOCTYPE html><html> <head> <title>float test</title> <style type="text/css"> /*reset*/ body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img{margin:0;padding:0;} .wrap{ width:400px; height:136px; margin:0 auto; border:2px solid #3c3c3c; } .wrap .left-sidebar{ width:100px; background-color:#e0c898; text-align:center; float:left; } .wrap .left-sidebar ul{list-style-type:none;} .wrap .main{ margin-left:110px; } .wrap .copyright{ background-color: #000; color:#fff; padding:5px; text-align: center; } </style> </head> <body> <div class="wrap"> <div class="left-sidebar"> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> </ul> </div> <div class="main"> <p>
新闻热点
疑难解答
