一天搞定CSS： 浮动（float）与inline-block的区别--11
浮动：
使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来。
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的更多相关文章
- 验分享：CSS浮动(float,clear)通俗讲解
经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...
- sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- css浮动(float)及如何清除浮动
前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...
- 一天搞定CSS： 浮动（float）及文档流--10
浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...
- CSS浮动(float,clear)通俗讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- 经验分享：CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 经验分享：CSS浮动(float,clear)通俗讲解(转载)
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- (转)经验分享：CSS浮动(float,clear)通俗讲解
文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身 ...
随机推荐
- 【模板】二分图最大权完美匹配KM算法
hdu2255模板题 KM是什么意思,详见百度百科. 总之知道它可以求二分图最大权完美匹配就可以了,时间复杂度为O(n^3). 给张图. 二分图有了边权,求最大匹配下的最大权值. 所以该怎么做呢?对啊 ...
- html的常用基础应用
HTML结构 如下一段最简单的HTML代码:<html> <head> <title>HTML页面</title> ...
- Redis技术分享
环境介绍: 开发环境: spring3+tomcat7+maven3+redis-3.0.7 运行环境: Linux 前言: 项目中引入redis背景: 项目中最初将科目.打印.利润表.资产负债表.现 ...
- JavaScript中 DOM操作方法
DM是(Document Object Model)的简称. 一.找元素 document.getElementById() 根据id选择器找,最多找一个: document.getElemen ...
- glup/grunt,browserify / webpack等的比较
gulp/grunt的比较: Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说,就是使用Gulp/Grunt,然后 ...
- 第三章 Docker的镜像
3.1.获取镜像 获取镜像 docker pull name[:TAG] #默认是从网络下载镜像,不指定tag会人下载latest标签下的镜像. 1 2 docker search ubuntu do ...
- eclipse中AndroidA工程依赖B工程设置
假设library为B工程,而SlideMenuTest为A工程,且SlideMenuTest需要依赖library工程(减少jar包形式的修改麻烦). 需要简单的设置即可. 1.B工程设置为libr ...
- [Mobile Web]Web中如何分辨移动设备?（iPad、iPhone、Android）
第一种, Javascript [javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片 var deviceAgent = navigator.use ...
- 仿淘宝左侧菜单导航栏纯Html + css 写的
这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考 废话不多说先来个效果图 接下来直接上代 ...
- [故障公告]14:39-15:39博客站点部分负载均衡遭遇3次20G以上的流量攻击
非常抱歉,今天下午14:39-15:39左右,博客站点的部分负载均衡遭遇3次20G以上的流量攻击,造成很多用户不能正常访问.由此给您带来麻烦,请您谅解. 攻击的过程是这样的: 14:39,第1次攻 ...