float:

定义:按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来(不完全脱离文档流)

值: left、right、none

特点:

1、浮动的块元素可以在一行显示,宽度是被内容撑开的
2、浮动的行内元素支持宽高
3、非浮动元素里的内容会留出前面浮动元素的位置(盒模型的位置)
4、浮动的子元素不会撑开其父元素的高度,所以换行、空格也不会影响父元素(要撑开父元素的话需要在父元素最后增加一个清楚左右浮动的子元素clear: both; after伪类清除浮动)

.clearfix:after{
content: '';
display: block;
clear: both;
}

inline、inline-block:
把换行代码解析成一个空格

display:inline-block; 行内块元素
特征:
1、行内块元素支持宽高
2、行内块元素可以在一行显示
3、不给宽高的话,宽度会由内容撑开
4、代码换行会被解析成一个空格
5、IE6、7不支持块元素的inline-block

6、行内块元素没有脱离文档流,所以能撑开父元素

IE6、7不认识inline-block,给行内元素加上这个属性后会触发IE的haslayout特点,会让行内元素具有与inline-block一样的特征,所以它不支持块元素的inline-block

inline-block与float的区别:

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

让块元素在同一行显示的方法: float 和inline-block的更多相关文章

  1. css布局------块元素水平垂直居中的四种方法

    HTML <div class="parent answer-1"> <div></div></div> CSS .parent { ...

  2. web - 块元素和内嵌元素的特征

    块: 1.独占一行 2.支持所有的样式 3.不设置宽度的时候,宽度撑满整行 常用的快标签有: div,section,header,nav,footer,article,aside,ul,ol,li, ...

  3. 块元素block,内联元素inline; inline-block;

    block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i stro ...

  4. CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  5. 关于IE 浏览器的position居中定位的问题和 行块元素的设置问题

    这两天在写页面时,遇到一些IE浏览器显示不正常的问题,主要有两个: 1. 在td 中设置span 元素水平垂直居中,在谷歌浏览器中可以正常显示,但是在IE 中却无法显示出想要的结果,即不能实现垂直水平 ...

  6. CSS 两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行解决办法

    我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...

  7. HTML&CSS基础-内联和块元素

    HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  8. CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号

    大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...

  9. html中的块元素(Block)和内联元素(Inline)(转)

    我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...

随机推荐

  1. 亚马逊拟斥资15亿美元建航空货运中心 - Amazon to spend $1.49 bln on air cargo hub, fans talk of bigger ambitions - ReutersFebruary 1, 2017

    2月1日消息,亚马逊本周二宣布将在肯塔基州开建其第一个航空货运中心,以应对高速增长的航空货运需求.亚马逊预计,该项目将带来2000个工作岗位. 据悉,该项计划总投入约为15亿美元,亚马逊或可从当地政府 ...

  2. Right-BICEP单元测试

    一.测试方法:Right-BICEP Right-结果是否正确? B-是否所有的边界条件都是正确的? I-能查一下反向关联吗? C-能用其他手段交叉检查一下结果吗? E-你是否可以强制错误条件发生? ...

  3. Linux 环境下svn 服务器搭建

    可使用自己下载的svn安装包,但要安装相关依赖包,yum 安装源提供的稳定版本svn 1.yum -y install subversion 2.创建本地库 mkdir -p /var/svn svn ...

  4. 经典面试题(一)附答案 算法+数据结构+代码 微软Microsoft、谷歌Google、百度、腾讯

    1.        有一个整数数组,请求出两两之差绝对值最小的值.记住,只要得出最小值即可,不需要求出是哪两个数.(Microsoft)  方法1:两两作差求绝对值,并取最小,O( n2 ). 方法2 ...

  5. Linux系统中增加swap空间大小

    在我的树莓派pi3上编译dlib库时,发现由于内存不足导致编译失败.树莓派是1G内存,swap只有50M,因此将swap增加到500M,编译通过.具体设置方法如下: 使用free命令带上m参数,查看s ...

  6. BETA预发布演示视频

    视频连接:优酷http://v.youku.com/v_show/id_XMTgxMjQxMjc0NA==.html?from=y1.7-2

  7. 把握曝光三要素(上):快门、光圈、ISO

    概要: 如果你还没有掌握快门.光圈和ISO,那这篇文章或许对你有所帮助! 把照片比作水池.把进光量比作水.把快门比作关闭水龙头的速度.把光圈比作水龙头的大小.把感光度ISO比作水龙头的滤网,这就变得好 ...

  8. 计算机网络:A、B、C、D和E类IP地址

    IP地址分为A,B,C,D,E五类. 网络号:用于识别主机所在的网络:主机号:用于识别该网络中的主机. 其中A类分配给政府机关使用,B类地址给大中型企业使用,C类地址给个人使用.这三种是主要的. IP ...

  9. gpart 分区工具

    gpart 分区工具 https://www.freebsd.org/doc/en_US.ISO8859-1/books/handbook/disk-organization.html Table 3 ...

  10. BZOJ1187:[HNOI2007]神奇游乐园——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1187 Description 经历了一段艰辛的旅程后,主人公小P乘坐飞艇返回.在返回的途中,小P发现 ...