标签：logs span ble display hid tab 元素 class oom
1 <style type="text/css"> 2 .main{width: 400px; margin: 0 auto; background-color: blue;} 3 .left,.right {float: left; width: 180px; height: 500px;} 4 .left{background-color: green;} 5 .right {background-color: silver;} 6 </style> 7 8 <div class="main"> 9 <div class="left">左列</div> 10 <div class="right">右列</div> 11 </div>
1、为浮动元素的父元素设置高度；
1 .main{height: 500px;}
缺点：在浮动元素高度不确定的时候不适用2、结尾处加空标签
（1）div标签 clear:both；
1 .clear{clear: both;} 2 3 <div class="main"> 4 <div class="left">左列</div> 5 <div class="right">右列</div> 6 <div class="clear"></div> 7 </div>
（2）br标签clear:both；
1 br{clear: both;} 2 3 <div class="main clear-float"> 4 <div class="left">左列</div> 5 <div class="right">右列</div> 6 <br /> 7 </div>
3、父级div定义 overflow:hidden；
1 .main{overflow: hidden;}
4、主流方法：父级div定义 伪类:after 和 zoom
1 <style type="text/css"> 2 .main{width: 400px; margin: 0 auto; background-color: blue;} 3 .left,.right {float: left; width: 180px; height: 500px;} 4 .left{background-color: green;} 5 .right {background-color: silver;} 6 .clear-float:after{display: block; clear: both; content: ""; visibility: hidden;height: 0; overflow: hidden;} 7 .clear-float{zoom: 1;} 8 </style> 9 10 <div class="main clear-float"> 11 <div class="left">左列</div> 12 <div class="right">右列</div> 13 </div>
5、父级div一起浮动；
（1）定义 overflow:auto；
1 .main{overflow: auto;}
（2）设置float
1 .main{float: left;}
6、父级div定义 display:table
1 .main{display: table;}
标签：logs span ble display hid tab 元素 class oom
原文地址：http://www.cnblogs.com/lulushow/p/6846203.html
