CSS学习（二）

一、浮动

float:left 元素向左浮动
float:right 元素向左浮动
由于块级元素默认独占一行，不能并列显示，因此可以使用浮动让块级元素并列显示。

HTML

<ul class="nav">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

CSS

.nav {
	background-color: red;
	margin: 0;
}
.nav li {
	width: 100px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	text-align: center;
	list-style: none;
}
.nav li:nth-of-type(1) {
	background-color: hotpink;
}
.nav li:nth-of-type(2) {
	background-color: lightcoral;
}
.nav li:nth-of-type(3) {
	background-color: lightsalmon;
}

使用浮动前

在css中加入float:left;

.nav li {
	width: 100px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	text-align: center;
	list-style: none;
	float:left;
}

使用浮动后

可以发现原本独占一行的块级元素，并列显示在同一行的了。但是需要注意的是由于使用了浮动，导致该元素脱离文档流，使其父级元素发生了高度塌陷，导致父级元素的背景颜色消失。

文档流
将窗体从上至下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

脱离文档流
元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方，处在另一个平面）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
注意：float浮动跟position:absolute一样拥有脱离文档流的功能，但是float虽然脱离了文档流但是仍然会占据位置，其他的文本内容会按照顺序继续排列。如果你对所有的元素都设置了浮动，你会看到这几个div并不会重叠，而是会顺序排列。

清除浮动
为了解决父级元素的高度塌陷问题，我们需要清除浮动。我使用伪类after清除浮动。

.nav:after {
	content: "";
	display: block;
	clear: both;
}

可以看到父级元素的背景颜色又正常显示了。

二、定位

1、position:fixed 定位
元素的位置相对于浏览器窗口是固定位置。不会因窗口滚动发生位置的变换。
2、position:relative 定位
新的元素的位置相对于原位置进行偏移。相对定位元素经常被用来作为绝对定位元素的容器块。
3、position:absolute 定位
元素的位置相对于设置了relative属性的父级元素进行偏移。如果没有父级元素设置relative属性，则按window进行定位。

HTML

<div class="div1">
	<div class="div2"></div>
</div>

父级设置position:relative
CSS

.div1 {
	width: 300px;
	height: 300px;
	background-color: red;
	position: relative;
}
.div2 {
	width: 150px;
	height: 150px;
	background-color: blue;
	position: absolute;
	right: 0;
}

父级不设置position:relative
CSS

.div1 {
	width: 300px;
	height: 300px;
	background-color: red;
}