解析CSS的三种基本布局模型

一.流动模型（Flow）

流动是网页的默认布局。

特征是：

1.块状元素会在所处的包含元素中自上而下排列，且默认宽度为100%，也就是自占一行。

2.内联（行内）元素会在所处的包含元素中从左到右排列，同处于一行。

二.浮动模型（Float）

当用css给元素设置float属性时，元素便可以进行浮动。此时元素的display属性会被隐性改变为内联块状元素（inline-

block），此时元素会脱离文档流。什么是脱离文档流呢？可以这样理解，本来这个标签是属于文档流管理的，那么它应该按照

文档流的正常布局方式从左至右从上之下，并且符合标签本身的含义。而脱离文档流之后，这个标签便不再受文档流布局的约

束，更重要的一点是这个标签原本在文档流中所占的空间也会被清除。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
div{
    border:2px red solid;
    width:100px;
    height:400px;
}
#div1{
    float:right;   
    backrgound-color:blue;            
}
#div2{
    background-color:red;
}
/*1.当div1设置为右浮动时，div2会填补正常文档流中div1原本的空间，且两个div同处于一行
  2.当div1设置为左浮动时，由于1情况，div1会覆盖div2，而div2文本则会被挤至原位置
  3.当div2单独设置浮动时，此时div1仍单独占一行，div2只会在原来的行内进行左右浮动。
</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>
</html>

特殊情况：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
div{
	border:2px red solid;
    width:100px;
    height:100px;
}
#div1{
    float:left;
    background-color:blue;
}
span{
/*测试 float: */ 
}
#div2{
    background-color:red;
}
/*此时div1进行左浮动，内联元素span与div1占同一行且会被挤至div右边，div2向上移动填补空间（不与span一行）
总结:1.块状元素进行浮动时，若相邻元素为内联元素则会合并成一行(内联块状元素特性)，在不覆盖的情况下水平布局的优先级高于内联元素。    
    2.内联元素进行浮动时，脱离文档流清除自身空间，提高水平方向文本的优先级。
    3.若浮动元素的上一个元素为块状元素，则不会对前面的元素造成任何影响。
</style>
</head>
<body>
<div id="div1">栏目1</div>
<span>123</span>
<div id="div2">栏目2</div>
</body>
</html>

三.层模型

层模型有三种形式：

1。绝对定位(position: absolute)

与float一样，能将元素从文档流中拖出来，然后可以使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父

包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

2。相对定位(position: relative)

它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一

个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，

偏移前的位置保留不动。

3。固定定位(position: fixed)

与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器

窗口的滚动条滚动而变化，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与

background-attachment:fixed;属性功能相同。看到这是不是恍然大悟，小网站上的牛皮癣广告原来就是用到了fixed固定定位，

难怪拖动滚动条的时候还是如影随形。

以上，ありがとうございます！