定位
- 定位是定义元素框相对于其正常位置应该出现的位置。
- 普通流定位、浮动定位、相对定位、绝对定位
普通流定位
- 页面中的块级元素从上到下一个接一个地排列
- 内联元素将在一行中从左到右排列水平布置
<div>
<p>p块级元素</p>
<h1>h1块级元素</h1>
<a href="#">a内联元素</a><b>b元素</b>
</div>
普通流定位
什么是 float？
float 是 css 的定位属性。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对 定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会 影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着
浮动（float）
- 浮动定位是指
- 将元素排除在普通流定位之外，即元素将脱离标准文档流
- 元素将不在页面占用空间
- 将浮动元素放置在包含框的左边或右边
- 浮动依旧位于包含框之内
- 浮动的框可以向左或向右移动，直到它的边缘碰到包含框或另一个浮动框的边框为止
HTML文档
<div id="d_big">
<div id="d1">我是div1</div>
<div id="d2">我是div2</div>
<div id="d3">我是div3</div>
</div>
CSS样式：
#d_big{
border:1px solid black;
width:400px;
height:400px;
}
#d1{
width:50px;
height:50px;
background:red;
}
#d2{
width:100px;
height:100px;
background:blue;
}
#d3{
width:150px;
height:150px;
background:green;
}
未浮动
float
CSS样式表
#d1{
float:left;
}
#d2{
float:right;
}
#d1{
float:left;
}
clear
- clear属性用于清除浮动带来的影响
- clear：none/left/right/both;
- 定义了元素的哪边上不允许出现浮动元素
举例说明：
CSS样式
#d1{float:left;} #d2{float:none;} #d3{float:none;}
未消除float影响
CSS样式
#d1{float:left;} #d2{clear:both;float:none;} #d3{float:none;}
消除float影响
有一个问题：
div1进行了左浮动，div2没有进行浮动。dvi1进行左浮动不是不占空间吗？为什么div2中文字“我是div2”被div1挤到边框外呢？
进行了左右浮动的元素随脱离了普通文档流，不占用空间。但还是会占用文字域。
如果我们就想让div2中的文字区域不被div1占用，该怎么处理？
这时候绝对定位和相对定位可以派上用场了
CSS样式表：
#d_big{
position:relative;
}
#d1{
position:absolute;
top:0px;
left:0px;
}
positon-1
overflow
- 使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素，那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景，这个问题会很难被注意到，但是这是一个很重要的问题。
overflow-1
CSS样式
d_big{
border:1px solid black;
/*width:400px;
height:400px;*/
}
#d1{float:left;} #d2{float:left;} #d3{float:left;}
overflow
怎么清除这种影响呢？
CSS样式
#d_big{
overflow:hidden;
}
overflow-2
