昨天做一个css的东西，在开始用js的时候才发现被float占位了

因为float浮动起来了，我清除了浮动，但是还是占位

然后我同事就告诉我其实可以不用float来左右浮动

在父元素上用display:flex完全就可以让子元素左右浮动起来了

而且line-height也可以不用，display:flex里面的align-items:center可以让这个容器处在垂直居中的位置

当然justify-content:center当然就是水平居中了

display:flex代替float的更多相关文章

  1. display:box和display:flex填坑之路

    背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...

  2. display:box；display:flex；弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  3. css display:flex 属性

    一:display:flex 布局 display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它 ...

  4. display:flex布局

    /*背景 居中 自适应 铺满容器*/ background: center / cover; flex布局是什么? flex是Flexibe Box 的缩写,意思为”弹性布局”, 用来为盒子模型提供最 ...

  5. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  6. 1.display:flex布局笔记

    /*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...

  7. display:flex 布局教程，弹性布局！

    display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...

  8. css中的clear:both,display:flex;

    介绍两者一起讨论的原因: 在明天就国庆的日子里陪着程序员的只有代码,啤酒,还有音乐,然后就是灯光下默默陪伴自己的影子.好了,不矫情了. -------------------------------- ...

  9. CSS——display:flex

    Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 设为Flex布局以后,子元素的float.clear和vertical-align属性 ...

随机推荐

  1. 笔记-树形dp

    this is not a 正经的note you may not understand Problem 1:二叉树,有权,要选它父亲才能选它,$n\leq200,m\leq500$ I: $dp_{ ...

  2. JavaScript闭包的特性

    先看一下代码: 01 <ul> 02     <li>1111</li> 03     <li>2222</li> 04     <l ...

  3. [mysql]深入Mysql字符集设置[转载]

    http://www.laruence.com/2008/01/05/12.html 基本概念 • 字符(Character)是指人类语言中最小的表义符号.例如’A'.’B'等: • 给定一系列字符, ...

  4. linux内核的配置

    以2.6.35.7版本的内核为例 总结:.config决定了Make时的条件编译与连接..config文件由两次配置第一次make XX_defconfig 第二次menuconfig. 1.分析源码 ...

  5. sql service 事务与锁

    了解事务和锁 事务:保持逻辑数据一致性与可恢复性,必不可少的利器. 锁:多用户访问同一数据库资源时,对访问的先后次序权限管理的一种机制,没有他事务或许将会一塌糊涂,不能保证数据的安全正确读写. 死锁: ...

  6. aos.js让页面滚动变得丰富

    (转)<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script ...

  7. vijos 1002 简单压缩+DP

    描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数轴上 ...

  8. spring cloud config 详解

    Spring Cloud 为开发人员提供了一系列的工具来快速构建分布式系统的通用模型 .例如:配置管理.服务发现.断路由.智能路由.微代理.控制总线.一次性Token.全局锁.决策竞选.分布式sess ...

  9. Mimikatz.ps1本地执行

    PS C:\Users\hacker> Get-ExecutionPolicy Restricted PS C:\Users\hacker> Set-ExecutionPolicy Unr ...

  10. 第一章: 文件句柄转化为 typeglob/glob 与文件句柄检测

    #为了使在子例程中传递文件句柄不出问题 #我们要把文件句柄转为glob或typeglob #转为glob $fd = *MY_FILE; #转为typeblog $fd = \*MY_FILE; #两 ...