css 三种布局定位

css有三种布局定位

1.流式布局

这是默认的布局方式，也叫标准文档流。页面标签元素自左向右，自上而下排布。行内元素自左向右，块级元素自上而下。

2.浮动布局--float属性

float属性值：left，right，none

特点：元素会左移或者右移，知道碰到容器为止

设置浮动属性的元素会对相邻元素产生影响，特指紧邻后面的元素 

还有一种情况，就是父容器中两个子容器都设置了float属性之后，父容器会受到影响，高度无法展开

对于受到影响的元素需要用清除浮动的方式来消除影响，有两种消除元素浮动的方式

（1）设置元素clear属性，clear:both或者clear:left;或者clear:right;一般用于清除紧邻的后面元素的浮动

（2）同时设置width:100%(或者固定宽度)+overflow:hidden; 一般用于清除受到影响的父容器的浮动

3.绝对定位布局

通过设置position属性实现

（1）相对定位，position:static

特点：相对于自身原有位置进行偏移，仍处于标准文档流中，随即拥有偏移属性和z-index属性

（2）绝对定位，positon:absolute, positon:fixed也属于绝对定位

特点：建立了以包含块为基准的定位，完全脱离了标准文档流，随即拥有偏移属性和z-index属性