标签：style class blog code color width
正常的块级元素默认会独占一行，我们可以通过浮动的方式来使其脱离文档流，横向排列。但是浮动如果不及时清除，就会影响下一个元素的表现。所以我们要及时地清除浮动。那么如何清除浮动呢？
首先说明，我们要的是真真正正的清除，不是撑起父元素，所以像为父元素设置高度，这种做法我不提倡。
方法一：
如果上一个元素是一个浮动元素，我们可以在其后面放置一个‘clear’元素，即将一个空元素设置成clear：both；这样之前的浮动效果就到此为止了。这样做还有一个好处就是，如果父元素没有设置宽和高，浮动元素不在文档流中，不会将父级元素撑起来。但是clear元素会将它撑起来。
方法二：
比较高端的方法，利用BFC特性。
我们使用overflow：hidden；触发BFC。使父元素强行包裹浮动元素，并隔绝内外环境。外面的元素不会受里面浮动元素影响。
方法三：
为父元素设置高度，还是因为浮动元素不会撑起父元素，父元素是空的，是扁的。我们手动设置高度为浮动元素占位。
方法四：
父元素也浮动，我不提倡这种做法。
方法五：
父级div定义 伪元素:after 和 zoom
1 .div1 { 2 background-color:#0000ff; 3 border:1px solid red; 4 } 5 6 .div2 { 7 background-color:#ff0000; 8 border:1px solid red; 9 height:100px; 10 margin-top:10px; 11 } 12 13 .left { 14 float:left; 15 width:20%; 16 height:200px; 17 background-color:#cccccc; 18 } 19 20 .right { 21 float:right; 22 width:30%; 23 height:80px; 24 background-color:#cccccc; 25 } 26 27 /*清除浮动*/ 28 .clearfloat:after { 29 display:block; 30 clear:both;content:""; 31 visibility:hidden; 32 height:0; 33 } 34 35 .clearfloat { 36 zoom:1; 37 }
1 <div class="div1 clearfloat"> 2 <div class="left">左左</div> 3 <div class="right">右右</div> 4 </div> 5 6 <div class="div2">第二个div</div>
/*伪元素的方法不建议初学者使用*/
方法六：
将父元素设置为表格，同样不提倡。
标签：style class blog code color width
原文地址：http://www.cnblogs.com/webARM/p/3781832.html
