浮动：

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

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. 谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. CF #April Fools Day Contest 2016 E Out of Controls

    题目连接:http://codeforces.com/problemset/problem/656/E 愚人节专场的E,整个其实就是个Floyd算法,但是要求代码中不能包含 definedoforfo ...

  3. 【Java】大文本字符串滤重的简单方案~

    本文章也同步至本人的CSDN博客中: http://blog.csdn.net/u012881584/article/details/70477832 今天来说一个Java中处理大文本字符串虑重的两个 ...

  4. 基于Prism.Windows的UWP开发备忘

    以前做UWP开发都是使用MvvmLight,主要是简单易上手,同时也写了很多MvvmLight的开发系列文章: UWP开发必备以及常用知识点总结 UWP开发之Mvvmlight实践九:基于MVVM的项 ...

  5. 函数指针|指针函数|C文件操作

    body,table { font-family: 微软雅黑; font-size: 10pt } table { border-collapse: collapse; border: solid g ...

  6. Memcached安装使用教程及常见问题

    一.Windows下安装memcahed 1.下载memcache的windows稳定版,解压放某个盘下面,比如在c:/memcached2.在终端(也即cmd命令界面)下输入"c:/mem ...

  7. javaweb项目-医者天下 （Spring+SpringMVC+MyBatis）

    项目下载地址:http://download.csdn.net/detail/qq_33599520/9826683 项目完整结构图: 项目简介: 医者天下项目是一个基于Spring+SpringMV ...

  8. 关于WordPress搬家方法步骤的整理

    最近准备更换自己的博客服务器,所以需要将原来服务器上的所有东西都搬到新的服务器.为了数据的安全,在网上找了很多的资料.现在整理一下整个搬家过程的操作步骤.下面进入正题: 1.测试环境这次我使用的示例服 ...

  9. Linux文件属性及如何修改文件属性

    ls -al:显示文件的文件名与相关属性并列出所有文件详细的权限与属性 dr-xr-x---.   7       root     root       4096       Apr3 12:31 ...

  10. jgs--多线程和synchronized

    多线程 多线程是我们开发人员经常提到的一个名词.为什么会有多线程的概念呢?我们的电脑有可能会有多个cpu(或者CPU有多个内核)这就产生了多个线程.对于单个CPU来说,由于CPU运算很快,我们在电脑上 ...