浮动：

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

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. 用 js 的 selection range 操作选择区域内容和图片

    原创文章,转载请注明出处并保留地址.原文地址:http://www.cnblogs.com/muge10/p/6723894.html 最近在做编辑器相关的东西,遇到一个需求,用户在编辑器中插入或者粘 ...

  2. struts2 之 ServletAPI

    1. 在struts2中有两种方式使用SercletAPI,一种解耦方式,一种耦合方式. 2. 解耦方式就是使用ActionContext 来实现,是完全解耦 servletAPI. ActionCo ...

  3. leetcode水题(一)

    Two Sum 1 public int[] twoSum(int[] numbers,int target){ Map<Integer,Integer> map = new HashMa ...

  4. 如何有效快速提高Java服务端开发人员的技术水平？

    我相信很多工作了3-5年的开发人员都会经常问自己几个问题: 1.为什么总是感觉技术没有质的提高? 2.如何能够有效和快速的提高自身的技术水平? 3.如何进入到一个牛逼的大公司,认识牛逼的人? 这篇文章 ...

  5. Let's Encrypt: 为CentOS/RHEL 7下的nginx安装https支持-具体案例

    环境说明: centos 7 nginx 1.10.2 前期准备 软件安装 yum install -y epel-release yum install -y certbot 创建目录及链接 方法1 ...

  6. git 设置不需要输入密码, 去除 fetch / pull 代码每次都需要输入密码的烦恼

    https方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受https带来的极速 设置记住密码(默认15分钟): git config --global credenti ...

  7. [进程管理]Linux进程状态解析之T、Z、X

             Linux进程状态:T (TASK_STOPPED or TASK_TRACED),暂停状态或跟踪状态.          向进程发送一个SIGSTOP信号,它就会因响应该信号而进入 ...

  8. Laravel 5.2 教程 - 邮件

    一.简介 Laravel 的邮件功能基于热门的 SwiftMailer 函数库之上,提供了一个简洁的 API.Laravel为SMTP.Mailgun.Mandrill.Amazon SES.PHP的 ...

  9. poj1410计算几何线段相交

    You are to write a program that has to decide whether a given line segment intersects a given rectan ...

  10. 深入浅出理解yield

    索引 转载部分内容来自:http://www.jianshu.com/p/d09778f4e055 [彻底理解yield] http://blog.csdn.net/haskei/article/de ...