• css div 清理浮动的2种方法


    使用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> 
  • 相关阅读:
    左耳听风-ARTS-第4周(2019/4/21-2019/4/27)
    Java集合总结
    Zuul网关总结
    左耳听风-ARTS-第3周(2019/4/7-2019/4/13)
    左耳听风-ARTS-第2周(2019/3/31-2019/4/6)
    Java泛型相关总结(下)
    左耳听风-ARTS-第1周
    去长江边走走,看看
    第1记
    c#发送邮件
  • 原文地址:https://www.cnblogs.com/xibei666/p/4444418.html
Copyright © 2020-2023  润新知