css常见问题解决方案总结

1.清除浮动

较好的方法：:after伪类+content内容生成
兼容性：大部分浏览器支持(Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)

// 兼容IE6/7，因其不支持:after伪类。设置该属性可以触发IE的haslayout属性，从而清除浮动
.fix{*zoom:1;} 
.fix:after{display:block; content:""; clear:both; overflow:hidden; visibility:hidden;}

2.大小不固定图片/多行文字 垂直居中

方案

.pic_box{width:300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;}
.pic_box img{vertical-align:middle;}
.pic_box:after{display:inline-block; width:0; height:100%; content:"center"; vertical-align:middle; overflow:hidden;}

3.文字展开收起效果可以利用input[type=“checkbox”]相关属性实现

css

.table {
			display: table;
			width: 100%;
			width: calc(100% - 30px);
			max-width: 400px;
			margin: auto;
			/*table-layout: fixed;
			text-align: left;*/
		}
		.td {
			display: table-cell;
			padding: 5px;
		}

		input[type="checkbox"] {
			position: absolute;
			clip: rect(0 0 0 0);
		}
		.check-in,
		.check-out {
			color: #34538b;
			cursor: pointer;
		}
		.check-out {
			display: none;
		}
		:checked ~ .check-out {
			display: inline-block;
		}
		:checked ~ .check-in {
			display: none;
		}
		.element {
			max-height: 0;
			overflow: hidden;
			transition: max-height .25s;
		}
		:checked ~ .element {
			max-height: 666px;
		}

html:

<div class="table">
  <div class="td">
       <input id="check1" type="checkbox">
       <p>个人觉得，display:table-cell最强的应用是可以任意个数列表的等宽效果。</p>
       <div class="element">
       <p>display:table-cell其他一些应用，例如，两栏自适应布局，垂直居中效果等等都是可以通过其他技术手段模拟出来的，但是，根据列表个数自动等宽的效果，其他CSS是很难模拟的，尤其当需要兼容IE8浏览器的时候。</p>
       </div>
       <label for="check1" class="check-in">更多↓</label>
       <label for="check1" class="check-out">收起↑</label>
   </div>
   <div class="td">
       <input id="check2" type="checkbox">
       <p>个人觉得，display:table-cell最强的应用是可以任意个数列表的等宽效果。</p>
       <div class="element">
       <p>display:table-cell其他一些应用，例如，两栏自适应布局，垂直居中效果等等都是可以通过其他技术手段模拟出来的，但是，根据列表个数自动等宽的效果，其他CSS是很难模拟的，尤其当需要兼容IE8浏览器的时候。</p>
       <p>然而，此方法也有局限性，就是只能实现单行列表的等分，所以，如果我们希望列表数目超过一定值的时候变成多行，就需要根据数目不同，输出不同的DOM结构，仅仅靠CSS有难度。</p>
       </div>
       <label for="check2" class="check-in">更多↓</label>
       <label for="check2" class="check-out">收起↑</label>
   </div>
</div>