文档流
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
当前所知的脱离文档流的方式有两种：浮动和定位。
css定位机制
普通流、浮动、绝对定位
css position属性
static：position默认值，保持文档流。
relative：相对本身的原始位置发生位移且保持文档流，占空间。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>相对定位</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="ouym" /> </head> <body> <div style=" 100px; height: 100px; background-color:#00ff00;"> div1</div> <div style=" 100px; height: 100px; background-color:#00ffff;position:relative;left:20px;top:-20px;"> div2</div> <div style=" 100px; height: 100px; background-color:#ffff00;"> div3</div> </body> </html>
效果如下：
absolute:脱离文档流，不占空间且相对于其包含块来定位(相对最近的非static块定位)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="ouym" /> </head> <body> <div style=" 100px; height: 100px; background-color:#00ff00;"> div1</div> <div style=" 100px; height: 100px; background-color:#00ffff;position:absolute;left:20px;top:20px;"> div2</div> <div style=" 100px; height: 100px; background-color:#ffff00;"> div3</div> </body> </html>
效果如下：
fixed：总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，一般页面上飘来飘去的，或者浮动在顶部或右下角的小模块都是用的fixed，脱离文档流。
浮动float
脱离文档流，不占空间。虽然普通块元素可以忽视浮动块，但是块元素中的文本不会，文本会围绕浮动块。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>浮动</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="ouym" /> </head> <body> <div style=" 100px; height: 100px; background-color:#00ff00;"> div1</div> <div style=" 100px; height: 100px; background-color:#00ffff;float:left;"> div2</div> <div style=" 100px; height: 110px; background-color:#ffff00;"> div3</div> </body> </html>
运行效果：
div2覆盖了div3的部分，但是把div3的文本挤下来了。clear可以清除浮动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>清除浮动</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="ouym" /> </head> <body> <div style=" 100px; height: 100px; background-color:#00ff00;"> div1</div> <div style=" 100px; height: 100px; background-color:#00ffff;float:left;"> div2</div> <div style=" 100px; height: 110px; background-color:#ffff00;clear:both;"> div3</div> </body> </html>
