第11讲_盒子的浮动与定位

网页的固定宽度1-3-1布局
在默认情况下，div作为块级元素是占满整行从 上到下依次排列的，但在网页的分栏布局中， 例如1-3-1固定宽度布局，我们希望中间三栏（ 三个div盒子）从左到右并列排列，这时就需要 将这三个div盒子都设置为浮动。 但三个div盒子都浮动后，只能浮动到窗口的左 边或右边，无法在浏览器中居中，因此需要在 三个div盒子外面再套一个盒子（称为container ），让container居中，这样就实现了里面的三 个div盒子居中
浮动的应用举例
1 图文混排及首字下沉效果等
2菜单的竖横转换
对li设置浮动即可实现
3 制作栏目框标题栏
标题栏的左端是栏目标题，右端是“更多”之类的链接。 如何将文字分别放在一个盒子的左右两端呢？
最简单的办法就是设置左边的文字左浮动，右边的文字右 浮动。
盒子的定位
CSS中定位的概念
浮动的清除
clear是清除浮动属性，它的取值有left、right 、both和none（默认值），如果设置盒子的清除 浮动属性clear值为left或right，表示该盒子的 左边或右边不允许有浮动的对象。值设置为both 则表示两边都不允许有浮动对象，因此该盒子将 会在浏览器中另起一行显示
广义的“定位”：在网页排版中，如何将一个盒子放置在某 个位置上。
狭义的“定位”：CSS中有一个非常重要的属性position，之 前我们用过该属性，实现了背景图片的定位 在本讲中，我们介绍的是广义的“定位”：
绝对定位 相对定位
默认的属性值
position定位-1
position定位分为：绝对定位与相对定位。
position定位-2
通过上述几个案例的演示，总结如下：
1、position、top、left、z-index四个属性配合使用； 2、绝对定位时，该元素悬浮于页面之上，不再占据页面位置； 3、绝对定位的基准点是以父块为标准，从而界定top、left值； 4、相对定位时，元素依然占据自己原始页面位置，只不过看上去 位置相对于自身发生了偏移； 5、相对定位的基准点是以原始位置的原点为标准，从而界定top、 left值； 6、z-index值决定了绝对定位时，元素距离页面有多远，值越大， 距离页面越远。
案例演示
position从字面意思上看就是指定块的位置，即块相对于 其父块的位置和相对于它自身应该在位置。
常用属性： position:absolute; position:relative; left:50px; top:50px; z-index:1;
//绝对定位 //相对定位 //块原点距离父块左侧距离 //块原点距离父块顶部距离 //深度定位
1－3－1布局示意图
header container nav content body
side
pagefooter
千里之行 始于足下
18
本讲目标
盒子的浮动 盒子的定位 Z-index空间位置
盒子的display属性
新知识点导入
一切皆为框，如何打破文档流？如何随心所欲的排 版这些框框、盒子呢？ 今天我们来了解网页设计中重要的部分：
盒子的浮动

盒子的浮动
在标准流中，块级元素的盒子都是上下排列，行 内元素的盒子都是左右排列，如果仅仅按照标准 流的方式进行排列，就只有这几种可能性，限制 太大。CSS的制订者也想到了这样排列限制的问题 ，因此又给出了浮动和定位方式进行盒子的排列 ，从而使排版的灵活性大大提高。 例如：有时希望相邻块级元素的盒子左右排列（ 所有盒子浮动）或者希望一个盒子被另一个盒子 中的内容所环绕（一个盒子浮动）做出图文混排 的效果，这时最简单的办法就是运用浮动（float ）属性使盒子在浮动方式下定位。
在标准流中，一个块级元素在水平方向会自动伸 展，在它的父元素中占满整个一行；而在竖直方 向和其他元素依次排列，不能并排，如图4-62所 示。使用“浮动”方式后，这种排列方式就会发 生改变。 CSS中有一个float属性，默认值为none，也就是标 准流通常的情况，如果将float属性的值设为left或 right，元素就会向其父元素的左侧或右侧靠紧， 同时盒子的宽度不再伸展，而是收缩，在没设置 宽度时，会根据盒子里面的内容来确定宽度。
clear属性既可以用在未浮动的元素上，也可以用 在浮动的元素上，如果对Box-3同时设置清除浮动 和浮动，即： .son3{clear:both; float:left;}
总结：清除浮动是清除其它盒子浮动对该元素的 影响，而设置浮动是让元素自身浮动，两者并不 矛盾，因此可同时设置元素清除浮动和浮动