浮动：

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

inline-block:

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

两者的区别

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

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

1）浮动时代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            ul{

                width: 300px;

                font-size: 0;

            }

            li{

                list-style: none;

                width: 100px;

                height: 150px;

                background: green;

                font-size: 40px;

                text-align: center;

                line-height: 150px;

                color: #fff;

                float: left;

                /*float: right;*/

                /*display: inline-block;*/

            }

        </style>

    </head>

    <body>

        <!--

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

        -->

        <ul>

            <li>1</li>

            <li style="height: 200px;">2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

        </ul>

    </body>

</html>

效果图：

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            ul{

                width: 300px;

                font-size: 0;

            }

            li{

                list-style: none;

                width: 100px;

                height: 150px;

                background: green;

                font-size: 40px;

                text-align: center;

                line-height: 150px;

                color: #fff;

                /*float: left;*/

                /*float: right;*/

                display: inline-block;

            }

        </style>

    </head>

    <body>

        <!--

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

        -->

        <ul>

            <li>1</li>

            <li style="height: 200px;">2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

        </ul>

    </body>

</html>

效果图：

总结：

在浮动时，若第一个元素的高度大于第二个元素的高度，第三个元素浮动时，会与第二元素并排在一列中，这样不能出现有序排列了。

在inline-block时，就算第一个元素的高度大于第二个元素的高度，第三个元素也不会与第二个元素排在一列。

【这里第一二三个元素，不是指第一二三个元素，只是为了说明三个元素的关系】

一天搞定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. ES6 深入let的作用域

    说到ES6的let变量声明,我估计很多人会想起下面几个主要的特点: 没有变量声明提升 拥有块级作用域 暂时死区 不能重复声明 很多教程和总结基本都说到了这几点(说实话大部分文章都大同小异,摘录的居多) ...

  2. Jenkins: 使用groovy + job-dsl 创建并触发job

    Jenkins: 使用groovy + job-dsl 创建并触发job 背景: 我们的 Automation 测试脚本需要在10个不同语言的机器上跑,本地化测试产品. 我们用Jenkins启动测试执 ...

  3. stm32之USART学习

    首先,我是看着这位博主的文章受到的启发,进而加深了自己对USART的理解.下面是自己改装并实验过的程序. 原文:http://www.cnblogs.com/greatwgb/archive/2011 ...

  4. LeetCode 327. Count of Range Sum

    无意看到的LeetCode新题,不算太简单,大意是给一个数组,询问多少区间和在某个[L,R]之内.首先做出前缀和,将问题转为数组中多少A[j]-A[i] (j>i)在范围内. 有一种基于归并排序 ...

  5. xmlplus 组件设计系列之二 - 按钮

    除了图标以外,按钮也许是最简单的组件了,现在来看看如何定义按钮组件. 使用原生按钮组件 在 xmlplus 中,HTML 元素也以组件的方式存在.所以,你可以直接通过使用 button 标签或者 in ...

  6. 十二个 ASP.NET Core 例子

    原文地址:http://piotrgankiewicz.com/2017/04/17/asp-net-core-12-samples/ 作者:Piotr Gankiewicz 翻译:杨晓东(Savor ...

  7. 在同一个系统上装两个不同版本的jdk，配置环境变量不起作用，jdk版本的切换问题

    本人这台笔记本前面装了jdk8,现在准备用jdk7,我安装好了jdk7:把系统变量中的JAVA_HOME 改为 D:\java\jdk\jdk7\jdk1.7.0_67,Path 下添加如下变量,记得 ...

  8. SQL SERVER 变量的使用和样例

    定义和使用局部变量:说明: 局部变量是用户可自定义的变量. 作用范围仅在程序内部. 局部变量的名称是用户自定义的,命名的局部变量名要符合SQL Server 2000标识符命名规则=>以@开 在 ...

  9. [ext4]06 磁盘布局 - 特殊inode

    Ext4预留了一些inode做特殊特性使用,见下表: inode Purpose 0 不存在,Ext4中不存在inode 0. 1 存放损坏的数据块链表 2 根目录 3 User quota. 用户q ...

  10. 使用 Python 实现命令行词典（一）

    最近经常在服务器上开发,经常会遇到不认识的单词,然而 linux 下实在没有什么好用的词典,索性自己写一个好了. 词典 API 首先,Google 了一下可用的词典的 API,发现金山的 iciba ...