让DIV设置Float后高度不自动增加!
我们知道，如果您没有闭合(清除)浮动元素，它将造成的后果是-----div的高度不能自动增加。目前用来清除“闭合(清除)浮动”的方法，主要是一下四种：
: {* `% r! f6 U* c$ }( v4 l3 Owww.520diannao.com
, ?3 Q% G, e: M5 |( U我爱电脑技术社区--打造最好的电脑技术自学交流平台我爱电脑技术社区--打造最好的电脑技术自学交流平台; U P9 Y, ?0 p" d# o$ W5 q7 v
1. 额外标签法
% ~/ n9 f6 E) p0 _! Z我爱电脑技术社区--打造最好的电脑技术自学交流平台www.520diannao.com. _( C8 ], [4 K: A
这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。 我爱电脑技术论坛8 A4 ^. X5 @3 n$ u# G
我爱电脑技术社区--打造最好的电脑技术自学交流平台4 }! d) ^, b- {* q
我个人不喜欢这种方法，但是它确实是W3C推荐的方法 打造最好的电脑自学交流论坛, c4 W. X' L0 ~( l+ K
% v0 H' [, {) I. F: Owww.520diannao.com ＜div style="clear:both;">＜/div> 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站" a* U0 _7 i2 d% i/ \; H b
: K P2 q3 F5 O |5 J K我爱电脑技术社区--打造最好的电脑技术自学交流平台 或者使用
" X: V5 U: q* t; L0 b, K打造最好的电脑自学交流论坛我爱电脑技术论坛+ z$ H; A9 T( Y
＜br style="clear:both;" />
3 G5 B" D( _8 \: ~我爱电脑技术论坛打造最好的电脑自学交流论坛6 a6 e I7 {1 K7 u% H7 M. n- g
2. 使用after伪类 g1 ?* P4 C1 J6 R
www.520diannao.com8 S& @1 i, a5 _( e: u, P
这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。
! Q- x+ Y% N9 F- m4 H m/ ~1 K Bwww.520diannao.comwww.520diannao.com0 `* u" `+ [: c
这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。 www.520diannao.com: S* @$ x# k1 r) T0 w: ~. ~
& U" c% I5 C/ K9 j/ @) }打造最好的电脑自学交流论坛 #outer:after{
l1 C* ^+ [( G9 `1 Q6 b8 B电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站www.520diannao.com) s3 _% h" R" |- E% }. ~/ o: m
content:".";
2 n( d, R( A- ^0 y! J7 wwww.520diannao.com我爱电脑技术论坛9 V- {0 r8 l/ ~/ y
height:0;
1 W+ Z# m& } Z$ A& kwww.520diannao.com
/ H# S" p, y% i) q9 T visibility:hidden;
/ ~* q+ ~: x8 H6 p% ~打造最好的电脑自学交流论坛电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站, U) g& P! u4 K+ z: U$ q/ x
display:block; 2 k5 q" x' u5 `# F) w! U
8 K* X/ ?+ z$ ~: g* n" V3 }www.520diannao.com clear:both; 我爱电脑技术论坛: ^1 }2 N0 ^1 M$ e ~
打造最好的电脑自学交流论坛8 w7 t4 ]8 h& B4 W: W% h: @
} www.520diannao.com% b" Q2 \% \: J$ \: R: n
7 k9 D0 U0 q! \* i A: U+ P0 J4 Gwww.520diannao.com 3.设置overflow为hidden或者auto 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站9 D8 x$ Q' i7 z$ A' p0 K" w
; ~7 }& P$ S: T- V& Y# ?www.520diannao.com 这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素. www.520diannao.com9 U; P* R9 M3 n; y% H, u/ Y
1 b$ N( p& g8 j- ?; F我爱电脑技术论坛 不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面
& N# f+ ]/ B3 k7 G& k, S# vwww.520diannao.com电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站, O6 c6 I, f2 ]" L: t+ w6 A( p3 j* U F
4.浮动外部元素，float-in-float 我爱电脑技术社区--打造最好的电脑技术自学交流平台% |, _# j# [6 ?3 _
* s) Y) L1 @) r$ y电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站 这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。
