css清理浮動

標籤：虛擬元素   hid   代碼   width   order   back   高度   bsp   html   

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清理浮動