zoukankan      html  css  js  c++  java
  • CSS float

    float脱离文档流,浮动在其他元素之上

    float后像一个行内块级元素inline_block,可设置宽高,宽度自动调整为元素中内容的宽度

    a1没有float

    <style type="text/css">
    .a1{background-color:rgba(0,187,255,0.5);}
    .a2{background-color:rgba(255,0,0,0.5); padding-top:50px;}
    </style>
    
    <div class="a1">11111111</div>
    <div class="a2">22222222</div>

    a1float后

    <style type="text/css">
    .a1{background-color:rgba(0,187,255,0.5); float:left;}
    .a2{background-color:rgba(255,0,0,0.5); padding-top:50px;}
    </style>
    
    <div class="a1">11111111</div>
    <div class="a2">22222222</div>

    <style type="text/css">
    img { float:right;}
    .container{ border: 1px solid #000;}
    .clear{clear: both;}
    </style>
    
    <div class="container">
    111111 <img src="/i/eg_smile.gif" /> </div>

    显示结果:

    图片浮动之后,container高度只剩下“111111”文字的高度,container不能被img撑开了

    要想撑开container,要么清除浮动,要么叫container也浮动

    1、清除浮动

    <style type="text/css">
    img{ float:right;}
    .container{ border: 1px solid #000;}
    .clear{ clear: both;}
    </style>
    
    <div class="container">
    111111
    <img src="/i/eg_smile.gif" />
    <div class="clear"></div>
    </div>

    2、container也浮动,宽度100%

    <style type="text/css">
    img{ float:right;}
    .container{ border: 1px solid #000; float: left;  100%;}
    .clear{ clear: both;}
    </style>
    <div class="container">
    111111
    <img src="/i/eg_smile.gif" />
    </div>

     

    float布局 和 inline-block布局

    不同:对元素设置display:inline-block ,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果

    相同:能在某程度上达到一样的效果

  • 相关阅读:
    dynamic load jar and init spring
    maven-assembly-plugin
    URL to load resources from the classpath in Java
    maven plugins
    URL加载jar
    spring自定义xml标签&自定义注解
    有序表查找---插值查找
    有序表查找---折半查找算法
    基本查找算法---顺序表查找
    图的基础---关键路径理解和实现(Java)
  • 原文地址:https://www.cnblogs.com/qq254980080/p/9845048.html
Copyright © 2011-2022 走看看