布局常用的方法:①用float设计浮动布局:float默认值为none,可根据页面需要设置为左浮动left,或右浮动right;
浏览器中效果:
因为 div 是区块元素,每个 div 独占一行,要想让三个 div 在同一行里显示,就需要给三个子元素设置浮动,但浮动会使元素脱离文档流,父元素高度崩塌,所以就要在父元素上清除浮动找回高度。
②利用position做定位布局: position 默认值为static,可根据页面需要设置为相对定位 relative 、绝对定位 absolute、固定定位 fixed。
与position一起使用的是四个坐标系统属性 top 、right 、 bottom 、left,可根据需要设置偏移值。
浏览器效果:
效果与浮动定位相同。
补充:在定位布局中,绝对定位的元素,会相对于第一个 static 定位以外的祖先元素进行定位。