zoukankan      html  css  js  c++  java
  • 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;}
  • 相关阅读:
    正则表达式
    Ajax跨域问题---jsonp
    Ajax
    字符串总结
    js 字符串加密
    jsDate()
    HDU 5430 Reflect
    HDU 5429 Geometric Progression
    HDU 5428 The Factor
    POJ 2485 Highways
  • 原文地址:https://www.cnblogs.com/CuiHongYu/p/7422698.html
Copyright © 2011-2022 走看看