CSS布局与定位,flow流,float

Web页面布局分为

流体布局liquid layouts:无论浏览器调整到多大宽度,布局都会扩展,填满整个浏览器。

冻结布局fozen layouts:冻结布局会锁定元素使之让它们冻结在页面上,以此可避免窗口扩展带来的许多问题

------------------------------------------慕课----------------------------------------

在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

flow流

块元素的位置:从上向下流，元素之间自动换行

内联元素的位置:水平方向上排列,总体上会从左上方流向右下方

间距的计算

当浏览器并排放两个内联元素，并且这些元素都有外边距，浏览器会在元素间创造足够的空间.

比如左侧元素外边距为10px,右侧为20,两个元素间会有30px空间.

当浏览器上下放置两个块元素,它会把它们共同的外边距折叠在一起.

比如上方元素的下外边距为20px,下方元素的上外边距10px,两个元素间会有20px空间.

float

所有浮动元素都有一个要求：必须先设置宽度！

#amazing{

width:200px;

float:right/left;

}

float的影响:

将使块元素从正常流中脱离出来,它的原来位置会被取代.而其他块元素中的内联元素会自动围绕着这个浮动元素。

• 此外,float不能浮动到中间.如果浮动到中间,那么浮动元素下面的内容就必须围该元素两边流动,浏览器还做不到这点。
• float元素的外边距也不会折叠,它是“浮”在页面上的.
• float元素可以浮动内联元素,比如图像(记得加内边距.给图像一点空间）其他内联元素较少使用浮动.
• 浮动方向为向左或右,直到它的外边缘碰到包含框或另一个浮动框的边框为止.
• --------------February 29 补充------------------------------------------
• 浮动对象的html要靠前排，其他元素会围绕它转
• 邻居靠近浮动对象一侧的margin=浮动对象总宽度
• 凝胶步骤: 设置大盒子width,两侧margin 自动
• 浮动会让元素塌陷。即被浮动元素的父元素不具有高度。例如一个父元素包含了浮动元素，它将塌陷具有零高度。可以按以下哪种方法处理：

在浮动元素后加个div设置clear: both; height:0,overflow:hidden
使用clearfix;
设置父元素浮动;

• 学习下  

  绝对定位(absolute)和浮动定位(float)分析

   http://www.jb51.net/css/20979.html

书上三种布局方式

浮动布局(固定主栏,浮动边栏)

1. 调整HTML顺序:浮动对象的html要放前排,这样其他元素会围绕它
2. 为主栏设置padding,margin,再为边栏设置padding,margin.width,float.(浮动对象的邻居靠近浮动对象一侧的margin=浮动对象总宽度.)

• 记得使用float前需要设置width,但是<img>可以不指定,浏览器会默认使用图像本身宽度

浮动布局(固定边栏,浮动主栏(不推荐))

     原理同上

凝胶布局

1. 实现页面居中,两侧留白 : 大盒子(包含标题,主栏,边栏,页脚)设置width,两侧margin自动)

绝对布局

(注意clear属性对绝对布局无效)

表格显示布局

(不一定是最佳选择)

浮动与绝对定位的异同:

同: 都从流中被删除,都需要设置width

异:

• 流中的元素会调整它们的内容来适应浮动元素的边界.绝对定位则没有.
• 绝对定位可以利用top/bottom/left/right来设置位置,z-index设置分层
• clear属性对浮动元素有效,对绝对定位元素无效.

布置页面时设置边栏还是主内容？

通常情况下我们会让边栏浮动，而不选择去设置主内容区宽度,然后让它浮动.
原因是这样的：浮动内容是不会因浏览器窗口拉大放小改变的，
如果主内容宽度不变,而边栏却随着窗口大小改变,页面看起来就会很糟糕.

如果对主内容,边栏都设置宽度,页面太大两者距离会加宽，页面太小会拧到一起.

clear

使用该技能，元素周围不允许有浮动内容(这样就不会被盖住了:))

#footer{

font-size:90%;

clear:left/right/both;

}