zoukankan      html  css  js  c++  java
  • CSS之float样式

    一、简介

      Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。

      Float常跟属性值left、right、none
      Float:none 不使用浮动
      Float:left 靠左浮动
      Float:right 靠右浮动

    二、float用法

      Html中的<div>标签是块级标签,总是会占整行,使用float可以使多个<div>标签按照需要进行放置。   

    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style>
            .c1{
                background-color: #00ffff;
                height: 80px;
                width: 20%;
            }
            .c2{
                background-color: #ff33ff;
                height: 80px;
                width: 80%;
            }
            div[name='float']{
                float: left;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="c1"></div>
            <div class="c2"></div>
            <br />
            <div class="c1" name="float"></div>
            <div class="c2" name="float"></div>
        </div>
    </body>
    float

      如下:可以看到设置float 的标签会按照设置占据位置

    三、float样式应用

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>float的应用</title>
        <style>
            .pg_header{
                background-color: #dddddd;
                height: 38px;
                line-height: 38px;
            }
            .float1{
                float: left;
                height: 400px;
                border: 1px solid #11021d;
                width: 19%;
            }
            .float2{
                float: right;
                height: 600px;
                border: 1px solid green;
                width: 80%
            }
            .float3{
                float: left;
                height: 200px;
                border: 1px solid #11021d;
                width: 19%;
            .pg_border{
                border:1px solid red;
    
        </style>
    </head>
    <body style="margin: 0 auto">
        <div class="pg_header">
            <div style="float: left">收藏本站</div>
            <div style="float: right">
                <a href="#">登入</a>
                <a href="#">注册</a>
            </div>
        </div>
        <div class="pg_border">
            <div class="float1"></div>
            <div class="float2">
                <div class="float3"></div>
                <div class="float3"></div>
                <div class="float3"></div>
                <div class="float3"></div>
                <div class="float3"></div>
    
            </div>
            <div style="clear: both;"></div>
        </div>
    
    
    </body>
    </html>
    
    # <div style="clear: both;"></div> 让pg_boder外框圈住所有内容
    布局
  • 相关阅读:
    yii2:如果获取config/web.php配置的值?
    yii2:引用项目外的文件或类
    yii2: oracle汉字占用字节长度
    yii2: oralce中文,有的汉字是2个字节,有的汉字是3个字节
    yii2:frontend/frontactoin curl生成
    Appium做Android功能自动化测试
    appium server日志分析
    appium的初始化准备工作
    Appium的Java封装
    使用Runtime.getRuntime().exec()在java中调用python脚本
  • 原文地址:https://www.cnblogs.com/bigberg/p/8431320.html
Copyright © 2011-2022 走看看