css div 清理浮动的2种方法

使用float属性，导致div的内容发生浮动，浮动带来负影响：

1、背景不能显示 2、边框撑不开 3、div的padding和margin不能起作用；

 

处理float浮动的两种方式：

1、div的子类中增加一个div，设置div中的clear:both,不允许左右两边存在浮动；

css:

.divcss5{ width:400px;border:1px solid #F00;background:#FF0} 
.divcss5-left,.divcss5-right{width:180px;height:100px; 
border:1px solid #00F;background:#FFF} 
.divcss5-left{ float:left} 
.divcss5-right{ float:right} 
.clear{ clear:both} 

html：

<div class="divcss5"> 
    <div class="divcss5-left">left浮动</div> 
    <div class="divcss5-right">right浮动</div> 
    <div class="clear"></div> 
</div> 

 

2、div的样式中添加属性，overfloaw:hidden;

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:

<div class="divcss5"> 
    <div class="divcss5-left">left浮动</div> 
    <div class="divcss5-right">right浮动</div> 
</div> 

 

转载于:https://www.cnblogs.com/xibei666/p/4444418.html