css的浮动和定位

一、脱离标准文档流

就是文档的“默认”状态，就是标签占用文档的位置。
标准文档流中，标签分为两种：块级元素、行内元素。
块级元素：
一定是霸占一行的，能设置宽、高，不设置宽度默认就是占满父亲。div、p、h、li
行内元素：
和其他行内元素并排，不能设置宽、高，默认宽度就是文字宽度。span、a、b、i、u
标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。

1、浮动

行级元素转换成块级元素
一旦一个元素浮动了，就可以设置宽高，无论是行标签，还是块标签 。
因为浮动之后，脱离标准流了，所以标准流里面的法律、规则都不适用了。

float:left;
或者
float:right;

(1)浮动宏观的看，就是做“并排”的,所有的元素都可以浮动
(2)具有float属性的元素在父标签中是不占空间的
(3)float能解决标签之间有间隙的问题
(4)浮动是css里面布局用的最多的属性

.box1{
	float: left;
	width: 300px;
	height: 400px;
	background-color: yellowgreen;
}
.box2{
	float: left;
	width: 400px;
	height: 400px;
	background-color: skyblue;
}

.box1{
	width:50px;
	height:50px;
	background: red;
	float:left;
			
}
.box2{
	width:100px;
	height:100px;
	background: green;
}

(5)浮动的元素有“字围”效果

<div>
	<img src="images/1.jpg" alt="" />
</div>
<p>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>

让div浮动，p不浮动;
div挡住了p，但是p中的文字不会被挡住，形成“字围”效果。

2、清除浮动

clear：none | left | right | both

none：允许浮动元素出现在两侧
left： 左侧不允许有浮动元素
right： 右侧不允许有浮动元素
both： 不允许有浮动

<div class=“clear”></div>
.clear{clear:both;}

兼容性：
下面这种清除浮动的方法在ie6下，div空标签会有默认高度。
解决方法：

.clear{
	clear:both;

//IE   
	overflow:hidden;
	height:0;
}

二、overflow

1、超出部分隐藏

overflow：visible | hidden | auto | scroll
visible：显示超出内容，不剪切内容也不添加滚动条,默认
hidden：超出内容隐藏
auto：默认属性，在需要时剪切内容并添加滚动条
scroll：总是显示滚动条
还可针对x轴和y轴设置
overflow-x：
overflow-y：

2、清楚浮动
如果一个父标签内所有的子集都浮动，给父元素设置overflow：hidden属性，则可以清除子元素的浮动。

<div class=“out”>
	<div class=“div1”></div>
	<div class=“div2”></div>
</div>
.out{
	overflow: hidden;
}
.div1{
	width:100px;
	height:100px;
	border:1px solid red;
	float:left;
}
.div2{
	width:100px;
	height:100px;
	border:1px solid blue;
	float:left;
}

三、visibility

可视可见
visibility ：visible | hidden | inherit
visible： 元素是可视的
hidden：元素不可视的(仍占其本来的空间)
inherit：继承父元素的可视性

visibility：hidden与display:none的区别：
visibility：hidden----隐藏后还占用空间流
display:none—不占用空间流

四、定位

定位有三种，分别是相对定位、绝对定位、固定定位
相对定位：
position:relative;
绝对定位：
position:absolute;
固定定位：
position:fixed;
1、相对定位
相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整

position:relative;   → 必须先声明，自己要相对定位了，
left:100px;       → 然后进行调整。
top:150px;       → 然后进行调整。

div{
	width: 200px;
	height: 200px;
}
.box1{
	background-color: yellowgreen;
}
.box2{
	background-color: skyblue;
 	position: relative;
 	top: 100px;
 	left: 400px;
}
.box3{
	background-color: orange;
}

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

相对定位的定位值
可以用left、right来描述盒子右、左的移动；
可以用top、bottom来描述盒子的下、上的移动。
相对定位默认参考点是页面的左上角
2、绝对定位

绝对定位脱标
绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了：

span{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: pink;
}

绝对定位的盒子居中
绝对定位之后，所有标准流的规则，都不适用了。
所以margin:0 auto;失效。

div{
width: 400px;
height: 60px;
background-color: green;

position: absolute;
left: 50%;
margin-left:-200px;
} 

1---left:50%;
2---(大盒子-小盒子)/2
	(430-250)/2=90; 流出两边的空余位置
3---430/2-90 ;   
margin-left:-125px;让定位再想左移动

3、固定定位
就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变

p{
width: 100px;
	height: 100px;
background-color: orange;


	position: fixed;
top: 100px;
	left: 100px;
}

<p></p>
<img src="images/2.jpg" alt="" />

用途：
导航栏固定
返回顶部