CSS的三种布局机制（标准流、浮动、定位）

CSS的三种布局机制

普通流（标准流）

普通流中主要分为两个板块，一个是块级元素，一个是行内元素

块级元素

块级元素的特点就是独占一行，从上到下顺序排列

块级元素：div、hr、p、h1~h6、ul、ol、dl、form、table、...

行内元素

行内袁术会按照顺序从左到右的顺序排列，直到父元素的宽度不足会换行

行内元素：span、a、i、em、...

浮动：Float

让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

我们知道想让独占一行的块级元素像行内元素那样在一排中有序的排列有两种方式

第一种display: inline-block，转换为行内块元素，但是有个缺陷就是每个行内块元素之间都会有空白间隙

第二种就是我们现在要说的浮动，

浮动的特点

脱标 ：脱离标准流，浮于标准流的上面

不占位置：浮动的元素是不会占用标准流的位置的，也就是说当一个盒子浮动了之后，其下的空间会被其他标准流元素占用，位于浮动元素下面

改变display属性：float属性会改变元素display属性，任何元素都可以浮动。浮动元素会生成一个块级框， 生成的块级框和我们前面的行内块极其相似。但是是紧密贴在一起的，不会像行内快那样有间隙。在定位后面统一详细说明。

浮动的应用

一般我们的网页的布局就是标准流 + 浮动 + 定位完成的

浮动和标准流的父盒子搭配

因为浮动脱标，所以我们一般会给浮动的元素添加一个父级标准流盒子，这样可以避免浮动的元素影响其他的标准流元素

清除浮动

首先说说清除浮动的运用场景

在很多情况下，我们的父级盒子可能是固定设置高度的，是需要其内子元素的高度叠起来撑起父盒子的高度的，如果此时我们的子盒子都使用了浮动，不占有父级标准流元素的高度，那么父盒子的高度就不会被撑高，高度就会为0。就影响了父盒子下面的标准流盒子，我们得清除由于浮动带来的这种影响，所以这里说成清除浮动

归根到底一句话

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的几种方式

• 第一种

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

但是我们实际工作中， 几乎只用 clear: both;

• 第一种的行内表现模式

//是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
style=”clear:both”></div>

• 第二种：给父级添加overflow属性方法

overflow为 hidden| auto| scroll

• 第三种 使用after伪元素清除浮动

 .clearfix:after {  
      content: ""; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;  
 }   
 .clearfix {
      *zoom: 1;
  }   /* IE6、7 专有 */

• 第四种：使用双伪元素清除浮动

.clearfix:before,
.clearfix:after { 
    content:"";
    display:table; 
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}

定位：position

将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面 即尾定位

定位的组成

定位由两部分组成：定位模式 + 边偏移

• 首先定位模式有：

值	语义
static	静态定位，即无定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

• 静态定位：用于不要定位时运用

• 相对定位：

  • 是相对于自己本来在标准流中的左上角尾基准进行偏移

  • 使用了边偏移的相对定位，它偏移之前在标准流中的空间仍然被他所占有

• 绝对定位：

  • 是以带有定位的父级元素为基准

  • 脱标，不想相对定位那样偏移后仍然占有标准流的空间

  • 父元素没有定位，就以浏览器为准，左上角对齐，一般父级元素都设置为相对定位偏移量为0，配合其内的子元素的绝对定位 + 偏移 完成布局，俗称子绝父相

• 固定定位：

  • 和绝对定位差不多，也是脱标

  • 但是不以带定位的父级为基准，而是从一而终的认浏览器为基准 + 边偏移

  • 不随滚动条而滚动

• 其次边偏移的元素有：

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离

绝对定位的盒子居中显示

之前我们设置居中显示，都是 margin : auto完成，但是在绝对定位和固定定位中，已经不通用了

• left: 50%；                 //让盒子的左边对齐父盒子的中线

• margin-left : -50px；//在让盒子想左移动绝对定位盒子的宽度的一般的距离，实现居中显示

• 水平居中、垂直居中同理。

定位盒子覆盖显示问题

在使用 (相对、绝对、固定) 定位的时候，会出现两个定位的盒子发生了部分区域或者全区域堆叠的问题

默认时是后来者居上，但是我们可以改变这种默认操作

• z-index : 999;

• 解释，默认为0，数值越大，盒子越在上面

浮动、定位改变dispay属性

• 我们知道，display是显示模式

比如转换为行内块：display : inline-block

但是，这里要说都是，当我们使用了浮动和定位后，相当于就是我们将元素转为了行内块，可以对齐直接对这个盒子设置高度和宽度等，无需再次使用display进行转换

• 给大伙比较一下或许就很好理解了：

显示模式转 为行内快，使元素在一行内顺序显示（多个元素有一定的缝隙，就是标准流）

浮动，使块元素在一行内顺序排列 （多个元素无缝隙，且浮动元素不占标准流空间）

定位（绝对和相对）也和浮动相似，默认转换为行内块的特性，可以直接设置高宽等

待补充......