调整盒子位置的方式

调整盒子位置的方式

1 边距margin/padding：

标准流内调整,

注意可能存在盒子塌陷的问题

2 弹性布局flex：

flex布局之后，就不用考虑盒子类型的概念了，行内元素也可以直接设置宽高了

3 浮动float:

特点：脱离标准流，不再保留原来的位置，其他盒子可能会占有它原来的位置

缺点：无法撑开父盒子，脱标不占位，可能与其他内容重叠

清除浮动：清楚浮动带来的影响，多种方法，给父盒子设置高度、clear:both、伪元素

4 定位position：

绝对定位的特点：脱离标准流，不再保留原来的位置，其他盒子可能会占有它原来的位置

缺点：脱标不占位置，可能会产生重叠

浮动与绝对定位的异同点

相同点：都脱离标准流； 都会浮起来，不占位置； 都不再保留原来的位置

不同点：添加浮动后，文字和图片不会被遮挡，他们会避开浮动的盒子；但是定位不会

浮动和绝对定位很多时候可以互换，只是他们的参考盒子不一样