CSS——浮动布局与定位布局

布局常用的方法：①用float设计浮动布局:float默认值为none,可根据页面需要设置为左浮动left，或右浮动right；

浏览器中效果：

       因为 div 是区块元素，每个 div 独占一行，要想让三个 div 在同一行里显示，就需要给三个子元素设置浮动，但浮动会使元素脱离文档流，父元素高度崩塌，所以就要在父元素上清除浮动找回高度。

②利用position做定位布局： position 默认值为static，可根据页面需要设置为相对定位 relative 、绝对定位 absolute、固定定位 fixed。

      与position一起使用的是四个坐标系统属性 top 、right 、 bottom 、left，可根据需要设置偏移值。

浏览器效果：

效果与浮动定位相同。

补充：在定位布局中，绝对定位的元素，会相对于第一个 static 定位以外的祖先元素进行定位。