布局的总结

1.盒子布局

(1)块级元素的垂直相邻外边距会合并，且其垂直相邻外边距合并之后的值为上元素的下
外边距和下元素的上外边距的较大值。
(2)行内元素实际上不占上下外边距，行内元素的左右外边距不会合并。
(3)浮动元素的外边距不会合并。 

 2.浮动布局

通过 float 属性去设置浮动布局

取值： left none( 不浮动 ) right

注意：如果浮动取值是 Left 的话（左浮），会对后面的元素产生一定的影响

 

如果要消除这种影响（消除浮动）通过 clear 属性

none: 默认 允许两边都可以浮动

left ：不允许左边的浮动

right ：不允许右边的浮动

both ：不允许两侧有浮动

 

 

3.定位布局

属性： position ------ 设置对象的定位方式

static ----- 静态定位（没有设置位置）默认

absolute ------- 绝对定位 ：将对象从文档流中分离出来，设置 left top right bottom 这四个方向去设

置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是 body

relative ------ 相对定位：对象不从文档流中分离出来，设置 left top right bottom 这四个方向去设置

相较于自身的相对定位