标签（空格分隔）： css relative float

我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block。

下面以index.html和layout_new.css这两个文件为例来探讨。

index.html:

<!DOCTYPE html>

<html>

  <head>

	<link rel="stylesheet" type="text/css" href="assets/css/layout_new.css">

  </head>

  <body>

    <div class = "a1">

	a1

		<div class = "b1">

		b1

		</div>

    between b1 and b2

		<div class = "b2">

		b2

		</div>

	</div>

  </body>

</html>

layout_new.css

.a1{

	border:10px red solid;

	width:90%;

	overflow:hidden;

}

.b1, .b2{

  display:inline-block;

  border:5px blue solid;

  width:40%;

}

.b1{

	position:relative;

	left:100px;

  height:200px;

  background-color:red;

}

.b2{

	float:left;

	height:300px;

}
  • 在layout_new.css中，我们重点关注以下几点:

    • .class为a1的div被设置为overflow:hidden
    • .b1与.b2倍设置为inline-block
    • .b1被设置为 position:relative和left:100px;
    • .b2被设置为float:left

      代码运行效果图如下：

我们一一分析：

  • 首先，inline-block是一种布局方式。之后的inline对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

  • 然后，overflow:hidden在高/宽度确定时能把多余的部分裁剪掉，但是如果没指定高/宽度的话（比如此例中，.a1就没指定高度）那么就可以根据内部内容的高度来自行适应。所以尽管.b1和.b2的高度不同，但最终.a1为了包含所有元素，其高度便以.b2为准了。

    • 如果一定要追究高度自适应的效果的原因，那就是因为overflow:hidden本质的功能还有一个是清除浮动元素（所以浮动的b2被考虑在高度计算范围内）。

      overflow:hidden可防止float元素遮盖原本在那的元素而发生的重叠现象。

不加overflow:hidden的话效果如下:



(由于b2是float的所以脱离了文档流所以a1高度计算时没有考虑 b2的高度)

.b1中的position:relative就是让对象脱离原本的文档流。

在此例中，本来b1的位置是这样的

但加了position:relative和left:100px后，它就相对于原来按文档流顺序时本该出现的位置往右偏移了100px。

.b2的float:left就是在文档流安排完成后，浮动到对应位置。浮动的对象是在文档流安排完成后再计算位置的。float对象在没设置overflow:hidden的时候可能会与原本在那的元素重叠，但设置了overflow:hidden后可以避免这种重叠情况。

那么总的来说我们可以推测出浏览器在布局时的顺序时这样的：

  • 先把float以外的内容按文档流一个个地显示到屏幕上（先不管relative的偏移，照常放置在那）
  • 然后把各个relative按设定的偏移去让它偏移。
  • 最后让float元素浮进去，把能挤开的元素都挤开
  • 于是就有了最后的效果图。

简明的例子讲解position:relative、float、overflow:hidden和inline-block的更多相关文章

  1. position,display,float,overflow,margin,padding之间的相互影响

    1.元素分为块级元素和行内元素, 块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题.行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且 ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  3. 装载：对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  4. 使用position:relative制作下边框下的小三角

    在制作tab选项卡的时候,有时会有下边框,且下边框下另一个头向下的小三角,这全然能够用css来实现,而不必使用背景图片. 由于使用背景图片时会有一个问题,选项卡内容字数不同.导致使用背景图片时无法控制 ...

  5. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  6. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  7. CSS布局 ——从display，position， float属性谈起

    页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...

  8. 谈谈CSS的布局，display、position、float

    前言 前端一直是我的一个很大的缺憾,这段时间痛顶思痛,决定好好的把前台的东西加强,这不,在学习了一段时间js之后,在做一些小练习,却发现最基本的一些css知识却还不了解,所以便有了这篇博文. 块级元素 ...

  9. CSS布局 ——从display，position， float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

随机推荐

  1. [置顶] block一点也不神秘————如何利用block进行回调

    我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数时候回调是比通知方便的,所以何乐而不为呢?如果你不知道回调使用的场景,我们来假设一下: 1.我现在玩手机 2.突然手机没有电了 3.我 ...

  2. Python之美[从菜鸟到高手]--生成器之全景分析

    yield指令,可以暂停一个函数并返回中间结果.使用该指令的函数将保存执行环境,并且在必要时恢复. 生成器比迭代器更加强大也更加复杂,需要花点功夫好好理解贯通. 看下面一段代码: def gen(): ...

  3. vs2012新建项目产生的问题

    当用vs新建web项目时遇到

  4. oracle数据库获取指定表的列的相关信息

    1.很多时候我们需要从数据库中获取指定表的所有列的相关属性,如 name,commens,datatype,datalength,pk等.下面就是制定的语句. select c.TABLE_NAME ...

  5. visio 2013 破解工具 - KMSpico

    背景:环境是 win7, 64 bit装了 visio 2013 , 可以却不能用它来画图,在网上找了一些破解工具,大都不能解决问题.网上不靠谱的广告型文章太多了,比较头痛. 所幸,终于找到正确的破解 ...

  6. CentOS6.4下安装JDK1.6

    首先,切换到jdk安装包所在目录: [rot@centos6 Downloads]# ./jdk-6u45-linux-x64-rpm.bin Unpacking... Checksumming... ...

  7. FTP创建与操作

    1,FTP服务创建于配置http://jingyan.baidu.com/article/0a52e3f4230067bf63ed7268.html, 2,FTP操作类 using System; u ...

  8. C/C++中volatile关键字详解 (转)

    1. 为什么用volatile? C/C++ 中的 volatile 关键字和 const 对应,用来修饰变量,通常用于建立语言级别的 memory barrier.这是 BS 在 "The ...

  9. HOJ题目分类

    各种杂题,水题,模拟,包括简单数论. 1001 A+B 1002 A+B+C 1009 Fat Cat 1010 The Angle 1011 Unix ls 1012 Decoding Task 1 ...

  10. BZOJ 4199: [Noi2015]品酒大会( 后缀数组 + 并查集 )

    求出后缀数组后, 对height排序, 从大到小来处理(r相似必定是0~r-1相似), 并查集维护. 复杂度O(NlogN + Nalpha(N)) ------------------------- ...