无浮动
<ul style=" 440px;"> <li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;"> <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/> </li> </ul>
其中图片高度180px，此时li的高度alert为183。↑↑↑↑↑
接下来，在li中加上float属性：↓↓↓↓↓
<ul style=" 440px;"> <li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;float:left"> <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/> </li> </ul>
此时li的高度alert为180。↑↑↑↑↑
接下来，在img中加上float属性：↓↓↓↓↓
<ul style=" 440px;"> <li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;"> <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" style="float:left"/> </li> </ul>
此时li的高度alert为0。↑↑↑↑↑
------------------------dispaly:inline-block与float:left--------------------------------
<ul style=" 440px;"> <li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;display:inline-block"> <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/> </li> <li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;"> <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/> </li> </ul>
<ul style=" 440px;"> <li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;float:left"> <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/> </li> <li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;"> <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/> </li> </ul>
浮动破坏了inline box，也就是破坏了高度，所以这里含有浮动属性的li元素实际上是没有高度的。所以呢，要是后面还有同样的li标签的话，就会水平对齐排列的
-------------------清除浮动的方法----------------------------
IE下清除浮动准则很简单，使元素haslayout就可以了。如宽度值，高度值，绝对定位，zoom，浮动本身都可以让元素haslayout。显然，首选zoom:1;不会干扰任何样式。
非IE浏览器常用的是overflow属性，overflow:hidden;或是overflow:scroll都可以，由于后者经常一不小心出现滚动条，所以前者用的更多些。
由于现代浏览器都支持after伪类伪元素，所以常常也会用after写入一个clear属性的元素清除浮动。当然，最投机取巧的方法就是直接一个<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿。
1. 投机取巧法
<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强，使用方便，是初学时使用的上佳之选。<div style="440px; border:4px solid; border-color: blue red green yellow;"> <div style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" /></div> <div style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" /></div> <div style="clear:both;"></div> </div>
未加之前，整个div的高度为0
加了之后<div style="clear:both;"></div>，高度为188
2. overflow + zoom方法
.fix{overflow:hidden; zoom:1;}
此方法优点在于代码简洁，涵盖所有浏览器，可谓不错的选择啊。
不过也是有问题的，就是这个overflow:hidden;是个小炸蛋，要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。一般不用这个方法，只是有时候顺便去除浮动时用用。
3. after + zoom方法
content:'clear both';没问题，或是content:'张鑫旭'也是ok的。于是有：.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了，不会影响任何其他样式，通用性强，覆盖面广。
------------------------------------
JavaScript可以改变CSS的属性。float貌似是JavaScript中的一个关键字，不能使用obj.style.float="left";这样的句子。得使用其他写法。
obj.style.styleFloat = "left";
其他浏览器：
obj.style.cssFloat = "left";
来源：http://www.zhangxinxu.com/wordpress/?p=594
--------------------------除了float外的让两个div并排的方法------------------------------------------------
1 <html xmlns="http://www.w3.org/1999/xhtml"><head> 2 <style type="text/css"> 3 .box{background: #09c;padding: 50px;width:39%;border:1px solid #f5f5f5;height: 300px;} 4 .mgr20{margin-right:20px} 5 </style> 6 </head> 7 8 <body> 9 <div style="padding:20px 0"> 10 <div class="box mgr20" style="position:absolute">aaaaaaaaaa</div> 11 <div class="box" style="margin-left:49%"></div> 12 </div> 13 <div style="background:red;height:50px;">sssssssssss</div> 14 </body></html>
用float会让高度塌陷，而position:absolute同样，那么第九行的padding-bottom：20px会不起作用，(见下下个例子)，所以本例中需要设定一个高度值（或是足以撑开高度的值）
这样用http://www.zhangxinxu.com/wordpress/?p=1152
其中的例子http://www.zhangxinxu.com/study/201010/mini-blog-no-width.html实验过后更有感触
里面提到的三无准则，不明觉厉！
--------------------------微博例子-------------------------------------------------
1 <html> 2 <head> 3 <style type="text/css"> 4 body{color:#333;background:#ddf3f7;} 5 .body_class{width:800px;margin:0 auto;clear:both;} 6 p{padding:0;margin:0;} 7 #blog{background:#fff;width:600px;} 8 #myBlog{padding:10px 25px 30px 20px;} 9 #bolg_head{position:absolute;} 10 #head_img{border:1px solid #ccc} 11 #bolg_content{padding:0 0 25px 76px;border-bottom:1px dotted #222;} 12 #bolg_content p{font-size:14px;line-height:22px;padding-bottom:6px;} 13 </style> 14 </head> 15 16 <body class="body_class"> 17 <div id="blog"> 18 <div id="myBlog"> 19 <div id="bolg_head"><img src="a.jpg" id="head_img" /></div> 20 <div id="bolg_content"> 21 <p>徐若瑄VIVIAN<img src="http://timg.sjs.sinajs.cn/t3/style/images/common/transparent.gif"/>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p> 22 <div><img src="b.jpg"/></div> 23 </div> 24 </div> 25 </div> 26 </body> 27 </html>
这是上述的图a图b
两个方法实现博客容器宽度变大时布局不乱：一个是第9行的position:absolute;一个第9行的改为float:left;
------------------------------------------------------------------
<html> <head> <style type="text/css"> .div { padding:20px; margin:10px 0 0 10px; background-color:#f0f3f9; float:left; } .abs { position:absolute; } </style> </head> <body class="body_class"> <div class="div"> <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" /> <p>图片无absolute</p> </div> <div class="div"> <img class="abs" src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" /> <p>图片absolute后</p> </div> </body> </html>
完了完了，这个absolute的例子又让我感觉。。凌乱了，可能是因为它把属性加在了img上？
先把效果放上来，
-----------------------CSS 浮动的16条规则-------------------------------------------------
1.浮动元素会从文档正常流中删除，但它仍会影响布局
2.浮动非替换元素必须为其指定width，否则元素的width会趋于0而导致浮动元素不能完整显示
3.一旦元素具有了浮动属性，它便成为了一个块级元素。
4.浮动元素的左右外边界不能超出包含块的左右内边界
5.浮动元素永不会重叠
6.浮动元素不会超过容器的上padding
7.后浮动的元素永不会超过先浮动元素的顶端
8.浮动元素会尽可能高地放置，便这个高受限于规则6和规则7
9.浮动元素的下边界没有要求，因此当容器不足以容下浮动元素时，浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素
，而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是：让容器也浮动
10.浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住
11.如果浮动元素设置了负的外边距、这将破坏规则4、6、7
12.当浮动元素的width>容器的width时，这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定)
13.浮动重叠规则：行内框(如strong)与浮动元素重叠时，其边框、背景、内容均位于浮动元素之上；块框与浮动元素重叠时，其边框、背景在
浮动元素之下，而内容在浮动元素之上。
14.对某个元素应用clear:left，意味着这个元素的左边不能有浮动元素。
15.clear不能用于非块级元素，比如<br/>，在大多数浏览器看来它是一个非块级元素，因此如果对br应用clear来清除浮动不会有任何效果，
除非改变br的display:block。
16.如果某元素应用clear清除浮动，则此元素设置的上外边距值会被忽略，但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素
与浮动元素之间有一个明确的间隔，可以在浮动元素上设置下外边距。