css清理浮动

1、对父级设置适合CSS高度

2、clear:both清除浮动

具体CSS代码:

1 .divcss5{ 400px;border:1px solid #F00;background:#FF0} 
2 .divcss5-left,.divcss5-right{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{ 400px;border:1px solid #F00;background:#FF0; overflow:hidden} 
.divcss5-left,.divcss5-right{180px;height:100px;
border:1px solid #00F;background:#FFF} 
.divcss5-left{ float:left} 
.divcss5-right{ float:right} 

Html代码不变

4:给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。

5:使用CSS的:after伪元素

.outer {zoom:1;}    
.outer :after {clear:both;content:'.';display:block; 0;height: 0;visibility:hidden;}
原文地址:https://www.cnblogs.com/CuiHongYu/p/7422698.html