浮动：

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

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. 使用NPOI写入Excel数据（ASP.NET）

    第一次做这个写入数据的功能,研究了下npoi的类 IWorkbook wb = new HSSFWorkbook(); //创建表 ISheet sh = wb.CreateSheet("X ...

  2. HTML表单基本格式与代码

    咱们先来看下今天咱们需要学习的内容,理解起来很简单,像我这种英语不好的只是需要背几个单词 在HTML中创建表单需要用到的最基本的代码和格式 <form method="post/get ...

  3. 动画制作 手机APP制作以及响应式的实现

    babber 宽度:浏览器的100% 原则上:高度-=图片高度 banner img 宽度:图片的实际宽度 高度:充满父容器 使用定位:让图片在父容器中绝对居中.     <!DOCTYPE h ...

  4. 我们一起学Docker（一）

    一.什么是Docker? Docker是一个基于LXC(Linux Container,Linux容器),以及cgroup的上层工具,通过对LXC,cgroup及相关系统命令的封装,使得用户可以非常方 ...

  5. 2017-4-24 WinForm开发基础、窗体的属性CenterScreen

    WinForm中文名称: Windows窗体,是·Net开发平台中对Windows Form的一种称谓. 客户端应用程序:C/S 客户端很重要的特点:可以操作用户电脑上的文件 窗体属性:窗体种类: + ...

  6. 设计模式之“Observer”注疏#01

    原文首发于我的微信公众号:GeekArtT. Observer设计模式是为了解决"信息同步更新"的问题而存在的.它试图解决这样一个问题:如果有"一堆对象"都跟随 ...

  7. apache安装过程中的常见问题

    1. 问题"curses.h: No such file or directory" /home/mediawiki/cmake-2.8.12/Source/CursesDialo ...

  8. MAMP 环境下为 php 添加 pcntl 扩展

    前言: pcntl 介绍 pcntl 扩展可以支持 PHP 的多线程操作.(非Unix类系统不支持此模块) phpize 介绍 phpize 可以用来给 PHP 动态的添加扩展.比如编译 PHP 时忘 ...

  9. openwrt通过libcurl上传图片，服务器端通过PHP接收文件

    一.客户端文件上传 libcurl上传文件有两种方式: 1.直接上传文件,类似form表单<input type=”file” />,<form enctype=”multipart ...

  10. css定位 浮动 伪类 margin

    一,margin .标准文档流,margin在竖直方向的不叠加,以较大的为准 .使用margin: auto;的盒子必须有明确的width,并且只有标准文档流的盒子 才能使用margin: auto; ...