float

作者: 王小贱_ww | 来源:发表于2018-02-11 15:59 被阅读13次

用函数求出两个实数的最大值
Android RectF函数
AHRS
iOS跳转到苹果自带百度高德地图导航
初学C语言
Canvas属性
快速求平方根
浮动，高度塌陷，定位
unity scale循环大小
使用canvas.drawRoundRect()时，解决四个圆角

一、浮动(float)的作用
设置了浮动的元素将脱离标准流
二、float的语法
float:left | right；
三、浮动(float)的特点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
</head>
<style type="text/css">

  .firstBox{
    width: 250px;
    height: 100px;
    background-color: red;
  }

  .secondBox {

    width: 300px;
    height: 150px;    
    background-color: yellowgreen;
  }
    
</style>
<body>
    
    <div class="firstBox">111111111111111111111</div>
    <div class="secondBox">222222222222222222222</div>
</body>
</html>

float1.png

现在对代码稍作修改，给类选择器firstBox添加float属性，其余部分保持原样：

  .firstBox{
    width: 250px;
    height: 100px;
    background-color: red;
    float: left;
  }

float2.png

float特点：

使用float的元素将脱离标准流不在占用原来的位置（上浮了。。。）
几个块级元素（比如div）同时使用float他们将在同一行显示
float可以把行内元素转为行内块元素
第二个特点:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
</head>
<style type="text/css">

  .firstBox{
    width: 250px;
    height: 100px;
    background-color: red;
    float: left;
  }

  .secondBox {
float: left;
    width: 300px;
    height: 150px;    
    background-color: yellowgreen;
  }
    
</style>
<body>
    
    <div class="firstBox">111111111111111111111</div>
    <div class="secondBox">222222222222222222222</div>
</body>
</html>

float3.png

四、浮动(float)用途
利用浮动布局实现图文环绕

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS浮动float属性</title>
    <style type="text/css">
       img{float:left;}
       p{font-size:16px;text-indent:28px;}
       div{
        width: 400px;
        height: 200px;
       }
    </style>
</head>
<body>
    <div>
        
         <img src="ic_fp_40px.png" alt=""/>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
    </div>
   
</body>
</html>

float5.png

float实现导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style type="text/css">
        

  ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        overflow: hidden;
        background-color: #272822;
    }

    li {
        list-style: none;
        float: left;
    }
    li a {
        display: block;
           padding: 14px 16px;
        color: white;
        text-align: center;
        text-decoration: none;
    }

li a:hover {
        background-color: yellowgreen;
        color: red;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="https://www.baidu.com/">Android开发</a>
        </li>
         <li>
            <a href="https://www.baidu.com/">Android开发</a>
        </li>
         <li>
            <a href="https://www.baidu.com/">Android开发</a>
        </li>
         <li>
            <a href="https://www.baidu.com/">Android开发</a>
        </li>
         <li>
            <a href="https://www.baidu.com/">Android开发</a>
        </li>

    </ul>
    
</body>
</html>

float6.png

float网页布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        
        * {
            margin: 0;
            padding: 0;
        }
        .all {
                width: 490px;
                height: 350px;
                background-color: #458B00;
                margin: 0 auto;
        }
        .header {
            height: 25px;
            background-color: pink;
        }
        .content {
            height: 300px;
            background-color: #46F3B6;
        }
        .left-content {

            width: 50px;
            height: 300px;
            background-color: #20B2AA;
            float: left;
        }
        .middle-content {
            width: 390px;
            height: 300px;
            background-color: #CBE923;
            float: left;
        }
        .top-content {
        height: 150px;
        background-color: #55cd0e;
    }

    .bottom-content {
        height: 150px;
        background-color: #a4cd0e;
    }


    </style>
</head>
<body>
    <br>
    <div class="all">
        <div class="header"></div>
        <div class="content">
            <div class="left-content"></div>
            <div class="middle-content">
                <div class="top-content"></div>
                <div class="bottom-content"></div>
            </div>
            <div class="right-content"></div>
        </div>
    </div>
    
</body>
</html>

float7.png

清除浮动

方法一：添加新的元素、应用 clear：both

clear{
   clear:both; 
   height: 0; 
   height: 0; 
   overflow:hidden;
}

方法二：父级div定义 overflow: auto

.over-flow{
    overflow: auto; 
    zoom: 1; //处理兼容性问题
}

方法三：伪类 :after 方法 outer是父div的样式

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.outer :after {
   clear:both;
   content:'.';
   display:block;
   width: 0;
   height: 0;
   visibility:hidden;
}