浮动 订阅
”鲁迅《野草·好的故事》:“大红花和斑红花,都在水里面浮动。” 茅盾 《路》二:“天空是浮动的轻云。”李二和《那一碧麦田一直牵扯我的记忆》:“这时正是五月,惊风乱飐麦浪,竟有些撩人,浓郁又散乱的麦香时起时伏。我半是哀怜、半是满足地望着在风中浮动的那一碧碧涟漪,竟诡秘地笑了。” 展开全文
”鲁迅《野草·好的故事》:“大红花和斑红花,都在水里面浮动。” 茅盾 《路》二:“天空是浮动的轻云。”李二和《那一碧麦田一直牵扯我的记忆》:“这时正是五月,惊风乱飐麦浪,竟有些撩人,浓郁又散乱的麦香时起时伏。我半是哀怜、半是满足地望着在风中浮动的那一碧碧涟漪,竟诡秘地笑了。”
信息
外文名
float
拼    音
fúdòng
含    义
漂移
中文名
浮动
浮动基本解释
收起全文
精华内容
参与话题
问答
  • 浮动

    2019-08-10 17:08:40
    浮动 浮动有三个值,none不浮动,left左浮动,right右浮动 .two { width: 100px; height: 150px; background-color: aquamarine; /* 左浮动 */ float: left; } 浮动后...

    浮动

    • 浮动有三个值,none不浮动,left左浮动,right右浮动
    .two {
               width: 100px;
                height: 150px;
                background-color: aquamarine;
                /* 左浮动 */
                float: left;
            }
    
    • 浮动后元素本身脱离文档流,原来的位置被其他元素所占据
    • 浮动后,在同一个父元素中,目标元素会占据一个浮动后位置
    • 注意:浮动只能是子元素在父容器中进行位置移动,如果父容器剩余宽度不能容纳另一个子元素,那么就换行,元素的浮动范围是父容器
    • 同一位置多个元素,具有浮动属性的元素,层级高于不浮动属性的元素

    总结:浮动规律:1:找到元素在布局流中的起始位置,2:沿自身水平方向进行浮动,如果水平方向不够,那么就自动换到下一行

    • 如果没有给父元素设置高度会出现什么问题
      父元素没有设置固定高度,那么父元素高度由子元素撑起来
      如果所有子元素都脱离文档流,那么父元素就没有高度了
      只有不脱离文档流的元素才能撑起父元素的高度

    解决浮动问题:
    1:给父元素设置一个高度
    2:在最后一个浮动元素下面新加一个元素,清除浮动
    3:伪元素清除浮动,给父元素添加伪元素
    例如:

    .warp:after {
                content: "";
                display: block;
                clear: both;
                }
    
    展开全文
  • <template> <div :style="{height:height+'px',zIndex:zIndex}"> <div :class="className" :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,...
    <template>
      <div :style="{height:height+'px',zIndex:zIndex}">
        <div
          :class="className"
          :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
        >
          <slot>
            <div>sticky</div>
          </slot>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Sticky',
      props: {
        stickyTop: {
          type: Number,
          default: 0
        },
        zIndex: {
          type: Number,
          default: 1
        },
        className: {
          type: String,
          default: ''
        }
      },
      data() {
        return {
          active: false,
          position: '',
          width: undefined,
          height: undefined,
          isSticky: false
        }
      },
      mounted() {
        this.height = this.$el.getBoundingClientRect().height
        window.addEventListener('scroll', this.handleScroll)
        window.addEventListener('resize', this.handleResize)
      },
      activated() {
        this.handleScroll()
      },
      destroyed() {
        window.removeEventListener('scroll', this.handleScroll)
        window.removeEventListener('resize', this.handleResize)
      },
      methods: {
        sticky() {
          if (this.active) {
            return
          }
          this.position = 'fixed'
          this.active = true
          this.width = this.width + 'px'
          this.isSticky = true
        },
        handleReset() {
          if (!this.active) {
            return
          }
          this.reset()
        },
        reset() {
          this.position = ''
          this.width = 'auto'
          this.active = false
          this.isSticky = false
        },
        handleScroll() {
          const width = this.$el.getBoundingClientRect().width
          this.width = width || 'auto'
          const offsetTop = this.$el.getBoundingClientRect().top
          if (offsetTop < this.stickyTop) {
            this.sticky()
            return
          }
          this.handleReset()
        },
        handleResize() {
          if (this.isSticky) {
            this.width = this.$el.getBoundingClientRect().width + 'px'
          }
        }
      }
    }
    </script>
    
    <template>
      <div>
        <sticky :z-index="10" class-name="sub-navbar">
          <el-dropdown trigger="click">
            <el-button plain>
              Platform<i class="el-icon-caret-bottom el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown" class="no-border">
              <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
                <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
                  {{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
            </el-dropdown-menu>
          </el-dropdown>
    
          <el-dropdown trigger="click">
            <el-button plain>
              Link<i class="el-icon-caret-bottom el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
              <el-input v-model="url" placeholder="Please enter the content">
                <template slot="prepend">
                  Url
                </template>
              </el-input>
            </el-dropdown-menu>
          </el-dropdown>
    
          <div class="time-container">
            <el-date-picker v-model="time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time" />
          </div>
    
          <el-button style="margin-left: 10px;" type="success">
            publish
          </el-button>
        </sticky>
    
        <div class="components-container">
          <aside>Sticky header, {{ $t('components.stickyTips') }}</aside>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <sticky :sticky-top="200">
            <el-button type="primary"> placeholder</el-button>
          </sticky>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
          <div>placeholder</div>
        </div>
      </div>
    </template>
    
    <script>
    import Sticky from '@/components/Sticky'
    
    export default {
      name: 'StickyDemo',
      components: { Sticky },
      data() {
        return {
          time: '',
          url: '',
          platforms: ['a-platform'],
          platformsOptions: [
            { key: 'a-platform', name: 'platformA' },
            { key: 'b-platform', name: 'platformB' },
            { key: 'c-platform', name: 'platformC' }
          ],
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now()
            }
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .components-container div {
      margin: 10px;
    }
    
    .time-container {
      display: inline-block;
    }
    </style>
    
    展开全文
  • 清除浮动 .clearfix:after { content: "\00A0"; display: block; visibility: hidden; width: 0; height: 0; clear: both; font-size: 0; line-height: 0; overflow: hidden; } .clearfix { zoom:...

    清除浮动

    .clearfix:after { 
    	content: "\00A0"; 
    	display: block; 
    	visibility: hidden; 
    	width: 0; 
    	height: 0; 
    	clear: both; 
    	font-size: 0; 
    	line-height: 0; 
    	overflow: hidden;
    }
    .clearfix { zoom: 1;}
    

    小三角
    四个方向的三角形

    .triangle { border: solid 10px transparent; }
    .triangle .bottom { border-top-color: green;}//下
    .triangle .top { border-bottom-color: green;}//上
    .triangle .top { border-right-color: green;}//左
    .triangle .top { border-left-color: green;} //右
    

    文本末尾添加省略号
    宽度固定,单行显示…

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    

    宽度不固定,

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    

    图片上下左右居中
    一种方式是把外层的 div 设为 table-cell。
    另一种方式,就是把 img 当做 div,CSS 代码如下:

    .content { 
    	width: 400px; 
    	height: 400px; 
    	border: 1px solid #ccc; 
    	text-align: center;
    	display: table-cell; 
    	vertical-align: middle;
    }
    

    html 代码如下:

    <div class="content"><img src="" alt="img" /></div>
    

    心形

    .heart { 
    	display: inline-block;
    	margin-top: 1.5em; 
    	width: 50px; 
    	height: 50px; 
    	background: green;
    }
    .heart:before,.heart:after { 
    	position: absolute; 
    	width: 1em; 
    	height: 1.6em; 
    	background: #000; 
    	border-radius: 50% 50% 0 0; 
    	content: ""; 
    	bottom: 0;
    }
    .heart:before { 
    	-webkit-transform: rotate(45deg); 
    	-webkit-transform-origin: 100% 100%; right: 0; 
    	background: red; 
    	opacity: 0.5; 
    	z-index: 5;
    }
    .heart:after { 
    	-webkit-transform: rotate(-45deg); 
    	-webkit-transform-origin: 0 100%;
    	 left: 0; 
    	 opacity: 0.8;
     }
    

    未完待续…

    展开全文
  • 2、熟练掌握浮动静态路由的配置过程。 二、实验内容 1、绘制拓扑图,根据拓扑图进行试验: 2、配置路由器,并最终验证网络的连通性。 三、实验过程 1、实验任务说明 1、配置浮动静态路由,使两个不同网段的PC...

    一、实验目的

    1、掌握路由器的工作原理。

    2、熟练掌握浮动静态路由的配置过程。

    二、实验内容

    1、绘制拓扑图,根据拓扑图进行试验:

    2、配置路由器,并最终验证网络的连通性。

    三、实验过程

    1、实验任务说明

    1、配置浮动静态路由,使两个不同网段的PC可以互通;

    2、查看配置端口状态和路由表信息,并给出说明。

    2、业务配置流程图

    3、实验配置过程

    1

    Router>enable
    
    Router#config t
    
    Router(config)#hostname R-WR-1
    
    R-WR-1(config)#ip routing
    
    R-WR-1(config)#int fa0/0
    
    R-WR-1(config-if)#no shutdown
    
    R-WR-1(config-if)#ip add 10.1.1.1 255.255.255.128
    
    R-WR-1(config-if)#exit
    
    R-WR-1(config)#int fa0/1
    
    R-WR-1(config-if)#no shutdown
    
    R-WR-1(config-if)#ip add 192.168.1.1 255.255.255.252
    
    R-WR-1(config-if)#exit
    
    R-WR-1(config)#int fa1/0
    
    R-WR-1(config-if)#no shutdown
    
    R-WR-1(config-if)#ip add 1.1.1.254 255.0.0.0
    
    R-WR-1(config-if)#exit
    
    R-WR-1(config)#ip route 2.0.0.0 255.0.0.0 10.1.1.2
    
    R-WR-1(config)#ip route 2.0.0.0 255.0.0.0 192.168.1.2 50
    
    R-WR-1(config)#exit
    
    R-WR-1#show ip int b
    
    R-WR-1#show ip route
    
    R-WR-1#copy running-config startup-config
    
    Destination filename [startup-config]?
    
    Building configuration...
    
    [OK]

    2

    Router>
    
    Router>enable
    
    Router#config t
    
    R-WR-2(config)#ip routing
    
    R-WR-2(config)#int fa0/0
    
    R-WR-2(config-if)#no shutdown
    
    R-WR-2(config-if)#ip add 10.1.1.2 255.255.255.128
    
    R-WR-2(config-if)#exit
    
    R-WR-2(config)#int fa0/1
    
    R-WR-2(config-if)#no shutdown
    
    R-WR-2(config-if)#ip add 192.168.1.2 255.255.255.252
    
    R-WR-2(config-if)#exit
    
    R-WR-2(config)#int fa1/0
    
    R-WR-2(config-if)#no shutdown
    
    R-WR-2(config-if)#ip add 2.2.2.254 255.0.0.0
    
    R-WR-2(config-if)#exit
    
    R-WR-2(config)#ip route 1.0.0.0 255.0.0.0 10.1.1.1
    
    R-WR-2(config)#ip route 1.0.0.0 255.0.0.0 192.168.1.1 50
    
    R-WR-2(config)#exit
    
    R-WR-2#show ip int b
    
    R-WR-2#show ip route
    
    R-WR-2#copy running-config startup-config
    
    Destination filename [startup-config]?
    
    Building configuration...
    
    [OK]

    四、实验查看及验证

    R-WR-1

    1、端口fa0/0的ip地址为10.1.1.1,物理和逻辑接口的状态都是up.

          端口fa0/1的ip地址为192.168.1.1,物理和逻辑接口的状态都是up.

          端口fa1/0的ip地址为1.1.1.254,物理和逻辑接口的状态都是up.

    2、路由表信息显示三条直连路由,一条浮动静态路由,直连端口分别是fa1/0、fa0/0、fa0/1.此时两个不同网段2.0.0.0和1.0.0.0通过路由器是可以互通的。

    R-WR-2

    1、fa0/0的ip地址为10.1.1.2,物理和逻辑接口的状态都是up.

          fa0/1的ip地址为192.168.1.2,物理和逻辑接口的状态都是up.

          fa1/0的ip地址为2.2.2.254,物理和逻辑接口的状态都是up.

    2、路由表信息显示三条直连路由,一条浮动静态路由,直连端口分别是fa1/0、fa0/0、fa0/1.此时两个不同网段2.0.0.0和1.0.0.0通过路由器是可以互通的。

    五、实验思考与总结

    1、在配置正确合理的基础上,更进一步的理解掌握其路由器工作原理;

    2、区分各个模式下的配置流程。

     

     

    展开全文
  • 浮动IP

    千次阅读 2012-05-30 08:50:50
    IP地址分成两种,通常叫做外网IP和内网IP,外网IP是网络连接请求时运营商给你的电脑分配的IP地址,这个IP地址一般情况...你说的浮动IP是不固定的外网IP,就是为了不被特殊手段跟踪,每次的外网IP都不一样。 其实现在的
  • CSS清除浮动方法集合 一、浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 浮动产生样式效果截图 本来两个...
  • ... ``` ...1.如果包含框是form,那么div浮动应该盖住用户名...所以感觉自己糊涂了,现在搞不清楚到底form中div设置浮动,div元素会向左浮动到哪个元素为止,遵从哪些原则? 不知哪位大神能帮我解答一下,感激不尽~
  • 一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。 /*css样式*/ <style type="text/css">...
  • 问题描述:例如:我有一个div 800*800 ;height:800px;... 第三四个div以第一个DIV的高度开始浮动 --问题:我要怎么样让第三四个DIV紧挨到第一个DIV下,而不是以前面DIV的最高高度为起始?
  • CSS浮动与清除浮动

    千次阅读 多人点赞 2020-02-23 16:22:12
    今天是第一次写博客,已经迫不及待地想把这周在逆战班学习的内容分享一下,这是我对css浮动与清除浮动的理解,希望可以帮助你。 CSS浮动与清除浮动( 本文以div元素布局为例。) 前言:由于CSS内容比较多,只能有...
  • 浮动与清除浮动

    2017-07-29 22:18:16
    什么是浮动 核心就是一段话,浮动的元素会脱离文档流向左或者向右运动,直到遇到父元素的边缘或者里一个浮动元素 浮动最初是用来进行文字环绕效果的 浮动元素的特性 浮动的元素是介于block和inline之间的一种存在 ...
  • ">浮动元素span    ; width: 200px;">  ; height: 150px; margin: 5px; padding: 5px; border: solid 1px red;  background-color: Olive;">浮动元素span   ! [为什么会呈现这种效果](正确理解 clear:both_...
  • W3CSchool中讲解CSS定位模块式,float那一节中,明确说对框1进行向左浮动时会遮住框2,原因是浮动后,元素脱离的文档流,不占据空间。为什么我对两张图中的之一进行浮动时,不会遮住另一张图呢???浏览器是IE8核心...
  • DIV浮动思想

    千次阅读 2012-08-23 19:46:37
    行内元素就是不换行的元素,并且大小可以自适应. 例如 a img font span .// 块元素就是不论内容多少 宽度高度多少都会换行显示 例如 div p li  行内元素和块元素的相互切换 用到 display: inline block ...
  • CSS - 浮动

    2018-06-18 17:13:40
    CSS允许浮动任何元素,从图像到段落再到列表,所有的元素都可以浮动。在css中,这种行为使用属性float实现。float:none | left | right 默认值:none 适用于:所有元素 none:设置对象不浮动 left:设置对象...
  • 浮动、定位

    千次阅读 2017-02-24 15:54:32
    浮动盒将元素的左边界或右边界移动到包含块或者另一个浮动盒的边界。 相对定位(relative):相对于自己原位置进行偏移,在文本流中的位置依然存在,不脱离文档流; 绝对定位(absolute):对于position值不为static...
  • css浮动

    千次阅读 多人点赞 2018-05-08 14:51:13
    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。写在前面的话: 由于CSS内容比较多,小菜没有...
  • vc浮动窗口

    热门讨论 2008-06-23 11:06:33
    vc实现的累迅雷,浮动窗口的一个原程序

空空如也

1 2 3 4 5 ... 20
收藏数 43,278
精华内容 17,311
关键字:

浮动