使用float属性,导致div的内容发生浮动,浮动带来负影响:
1、背景不能显示 2、边框撑不开 3、div的padding和margin不能起作用;
处理float浮动的两种方式:
1、div的子类中增加一个div,设置div中的clear:both,不允许左右两边存在浮动;
css:
.divcss5{ 400px;border:1px solid #F00;background:#FF0}
.divcss5-left,.divcss5-right{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{ 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:
<div class="divcss5"> <div class="divcss5-left">left浮动</div> <div class="divcss5-right">right浮动</div> </div>