Fork me on GitHub

CSS - 定位、浮动

普通流

元素在 HTML 中顺序的正常文档流。

- 关于块级元素和行内元素

指定框类型 display: block | inline | inline-block | none;
显式指定行内框的 width/height 没有作用，它的宽/高度总是刚好好容纳其内容，其值永远是 auto*auto。
但是，行框的行高可以通过设置 line-height 来改变。

- 相对定位

相对定位可以看做是普通流模型的一部分，因为其元素位置是相对于它在普通流中的位置的。

定位位置：
相对于其在文档流中的开始位置（relative）。

原理：

<!-- html -->
<div>
	<span>1111111</span>
	<span>2222222</span>
</div>
 <div id="test">
	<span>1111111</span>
	<span>2222222</span>
</div>
 <div>
	<span>1111111</span>
	<span>2222222</span>
</div>
<!-- style -->
div {
	border: 1px solid #000;
	margin: 10px;
}
#test {
	position: relative;
	top: -10px;
	left: -10px;
}

这里啦，每个 div 相对于上一个 div 定位。

没有 #test 下效果：

这是默认情况下，position 以 static 为值，出现在普通流中，它会忽略 top, bottom, left, right 或者 z-index 声明。

相对定位下的效果：

在使用相对定位时，无论是否移动（top/left..），元素仍然会占据原来的空间。因此，移动元素会覆盖其他框；移动后，后面流里的元素也不会随之移动。

绝对定位

绝对定位的元素位置是与文档流无关的，且不占空间（就像在普通流元素的布局中不存在似的），它会新创建一个 BFC 的布局环境。

定位位置：
相对于距离它最近的已定位的祖先元素；如果不存在已定位的祖先元素，那就相对于初始包含块。（absolute）

原理：
这里是页脚自适应文档最底部的栗子~~

<!-- html -->
<body>
	<div id="header"></div>
	<div id="wrapper"></div>
	<div id="footer"></div>
</body>
<!-- style -->
html {
	min-height: 100%;
	position: relative;
}
body {
	min-height: 100%;
	padding-bottom: 180px;
	margin: 0;
	padding: 0;
}
#header {
	width: 100%;
	height: 56px;
	background-color: #444;
}
#wrapper {
	width: 100%;
	min-height: 700px;
}
#footer {
	width: 100%;
	height: 180px;
	position: absolute;
	bottom: 0;
	background-color: #444;
}

这里啦，页脚 #footer 的绝对定位相对于 html 元素，始终在文档底部。

  • 固定定位
    固定定位也属于绝对定位的一种。

    定位位置：
    相对于浏览器视口。（fix）

    原理：

    <!-- html -->
<body>
	<div id="aside-nav"></div>
</body>
<!-- style -->
 #aside-nav {
	width: 46px;
	min-height: 100%;
	position: fixed;
	right: 0;
	background-color: #444;
}

    这里啦，不管页面怎么滚动、伸缩，它不哭不闹的 都在那里。PS:在 IE6/7 下有bug,可通过JavaScript实现。

浮动

浮动元素位置也是与文档流无关的，且不占空间（就像在普通流元素的布局中不存在似的），会新创建一个BFC 环境。

定位位置：
通过设置 float: left | right; 在其包含块中向左或向右浮动。
直到它的外边缘碰到包含块或另一个浮动框的边缘，停止左右浮动。
就好像水池里的泡沫，在碰到水池边或另一个停止浮动的泡沫，它就不能移动了。

原理：

  • 怎么浮动？
    参考W3C的浮动讲解

  • 浮动的清理
    一是在浮动元素后面添加一个空元素标签： <br style="clear:both;"> ，不过这浪费了一个标签。
    二是对容器层overflow：haslayout(IE)、overflow(非IE)，zoom: 1; overflow: hidden | scroll;，不过这可能会切断元素或出现滚动条。
    三是对容器层通过伪元素清除：.myDiv:after { content:" "; height:0; visibility:hidden; display:block; clear:both; }，目前广泛使用的方法。
    四是对子元素使用inline-block实现并排，而非浮动：{display: inline-block; *display: inline; *zoom: 1;}
    五是display: table;
    六是使用JavaScript清除。

    参考张鑫旭博客第八、九大点

  • 为什么清除浮动
    正如最开始所说，浮动元素在自己新创建的 BFC 环境中，脱离了原来的普通文档流。
    所以，一是对后面的元素的布局有影响（覆盖等），二是对包含浮动元素的容器高度有影响（跳离容器）

扩展阅读

BFC特性下多栏自适应布局

posted on 2015-11-17 13:40  travelling-wxy  阅读(135)  评论(0)  编辑  收藏  举报