浮动：

使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来。

inline-block:

inline-block是指行内块元素，它具有行内元素和块元素两者的特点，可以实现对元素的有序排序。

两者的区别

两者主要区别在于当标签的【高度不一致】时，体现出的差异

如果高度不一致的情况下，想让他们按顺序排列就可以选择inline-block

1）浮动时代码演示

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             ul{
  8.                 width: 300px;
  9.                 font-size: 0;
  10.             }
  11.             li{
  12.                 list-style: none;
  13.                 width: 100px;
  14.                 height: 150px;
  15.                 background: green;
  16.                 font-size: 40px;
  17.                 text-align: center;
  18.                 line-height: 150px;
  19.                 color: #fff;
  20.                 float: left;
  21.                 /*float: right;*/
  22.                 /*display: inline-block;*/
  23.             }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <!--
  28.             如果高度不一至的情况下，想让他们按顺序排列就可以选择inline-block
  29.         -->
  30.         <ul>
  31.             <li>1</li>
  32.             <li style="height: 200px;">2</li>
  33.             <li>3</li>
  34.             <li>4</li>
  35.             <li>5</li>
  36.             <li>6</li>
  37.         </ul>
  38.     </body>
  39. </html>

效果图：

2）使用inline-block时代码演示

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             ul{
  8.                 width: 300px;
  9.                 font-size: 0;
  10.             }
  11.             li{
  12.                 list-style: none;
  13.                 width: 100px;
  14.                 height: 150px;
  15.                 background: green;
  16.                 font-size: 40px;
  17.                 text-align: center;
  18.                 line-height: 150px;
  19.                 color: #fff;
  20.                 /*float: left;*/
  21.                 /*float: right;*/
  22.                 display: inline-block;
  23.             }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <!--
  28.             如果高度不一至的情况下，想让他们按顺序排列就可以选择inline-block
  29.         -->
  30.         <ul>
  31.             <li>1</li>
  32.             <li style="height: 200px;">2</li>
  33.             <li>3</li>
  34.             <li>4</li>
  35.             <li>5</li>
  36.             <li>6</li>
  37.         </ul>
  38.     </body>
  39. </html>

效果图：

总结：

  1. 在浮动时，若第一个元素的高度大于第二个元素的高度，第三个元素浮动时，会与第二元素并排在一列中，这样不能出现有序排列了。
  3. 在inline-block时，就算第一个元素的高度大于第二个元素的高度，第三个元素也不会与第二个元素排在一列。
  5. 【这里第一二三个元素，不是指第一二三个元素，只是为了说明三个元素的关系】

一天搞定CSS： 浮动（float）与inline-block的区别--11的更多相关文章

  1. 验分享：CSS浮动(float,clear)通俗讲解

    经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...

  2. sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...

  3. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  4. css浮动(float)及如何清除浮动

    前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...

  5. 一天搞定CSS： 浮动（float）及文档流--10

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  6. CSS浮动(float,clear)通俗讲解

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  7. 经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  8. 经验分享：CSS浮动(float,clear)通俗讲解(转载)

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  9. 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  10. (转)经验分享：CSS浮动(float,clear)通俗讲解

    文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身 ...

随机推荐

  1. a标签去掉默认样式并自定义样式

    a { text-decoration: none;//去掉下划线 color: inherit; -webkit-user-select: none; -moz-user-select: none; ...

  2. 【理论篇】Percona XtraBackup 恢复单表

    小明在某次操作中,误操作导致误删除了某个表,需要立即进行数据恢复. 如果是数据量较小的实例,并且有备份,即便是全备,做一次全量恢复,然后单表导出导入,虽然麻烦一点,却也花不了多少时间:如果是数据量大的 ...

  3. 腾讯实习面经(offer)

    腾讯的实习招聘也算是告一段落了.从内推到正式实习生招聘,总结一下.看了这么多面经,也把自己的经历写一下,有需要的朋友可以参考一下.毕竟互帮互助嘛. 内推 腾讯内推的经历比较惨淡,面了三个部门,都跪在一 ...

  4. 【知识学习】如何寻找真实IP

    1.多地点ping查询IP,如果都一样可能没有使用cdn,如果有cdn,尝试海外地点ping查询IP 2.ping一下没有WWW的域名,可能存在真实IP.比如www.baidu.com设置了cdn,那 ...

  5. 设计模式的征途—3.抽象工厂（Abstract Factory）模式

    上一篇的工厂方法模式引入了工厂等级结构,解决了在原来简单工厂模式中工厂类职责太重的原则,但是由于工厂方法模式的每个工厂只生产一类产品,可能会导致系统中存在大量的工厂类,从而增加系统开销.那么,我们应该 ...

  6. ajax从新浪获取实时股票数据

    最近在给公司做一个报表展示,然后领导要求上面加上一些股票的实时数据展示. 一开始同事给我一个聚合数据的网址,说从这上面可以获取到.我一看,哟呵,API接口什么的都提供好了,确实方便.然后想用的时候才发 ...

  7. Oracle的正则应用之匹配出手机号

    按照要求匹配出符合中国大陆手机号规则的数据 --1 表准备create table test_regexp( object varchar2(50)); --2 数据准备 insert into te ...

  8. 解决css引用图片不显示问题：background-image: url(../image/document.png);

    .icon-document { background-image: url(../image/document.png); display:block; float: left; width: 25 ...

  9. hadoop集群中客户端修改、删除文件失败

    这是因为hadoop集群在启动时自动进入安全模式 查看安全模式状态:hadoop fs –safemode get 进入安全模式状态:hadoop fs –safemode enter 退出安全模式状 ...

  10. WinRAR5.01注册码附注册机

    把下面的注册码复制到"记事本"中,另存为"rarreg.key"文件,放到WinRAR安装目录即完成注册.RAR registration datakjcy8U ...