css清理浮動
阿新 • • 發佈:2017-08-24
left 清除浮動 容器 ear clas 整體 strong back 使用
1、對父級設置適合CSS高度
2、clear:both清除浮動
具體CSS代碼:
1 .divcss5{ width:400px;border:1px solid #F00;background:#FF0} 2 .divcss5-left,.divcss5-right{width:180px;height:100px; 3 border:1px solid #00F;background:#FFF} 4 .divcss5-left{ float:left} 5 .divcss5-right{ float:right} 6 .clear{ clear:both}
Html代碼:
1 <div class="divcss5"> 2 <div class="divcss5-left">left浮動</div> 3 <div class="divcss5-right">right浮動</div> 4 <div class="clear"></div> 5 </div>
3、父級div定義 overflow:hidden
overflow:auto也可以
具體CSS代碼:
.divcss5{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden} .divcss5-left,.divcss5-right{width:180px;height:100px; border:1px solid #00F;background:#FFF} .divcss5-left{ float:left} .divcss5-right{ float:right}
Html代碼不變
4:給浮動的元素的容器添加浮動
給浮動元素的容器也添加上浮動屬性即可清除內部浮動,但是這樣會使其整體浮動,影響布局,不推薦使用。
5:使用CSS的:after偽元素
css清理浮動