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就会使得元素脱离文本流,且还有父元素高度坍塌的效果

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

  • 相关阅读:
    Javascript 生成全局唯一标识符 (GUID,UUID)
    nginx 与location语法详解
    nginx的安装与使用
    Linux上python3的安装和使用
    Linux上Redis安装和简单操作
    MySQL + centos +主从复制
    web服务基础
    linux系统基础优化及高级操作命令
    vim编辑
    Linux的基本命令
  • 原文地址:https://www.cnblogs.com/qq254980080/p/9845048.html
Copyright © 2011-2022 走看看