浮动与定位

浮动

1.1浮动介绍

• 元素可以设置向左或者向右浮动(不会跳出父元素的宽)
• 元素浮动后，会脱离文档流(对后面的元素产生影响)
• 元素一旦浮动，会转换为块状元素
• 浮动的元素并不独占一行(但仍然是块状元素)，因为脱离标准文档流
• 浮动的元素，宽默认会使auto，被内容撑开
• 多个元素浮动，会排成一行，宽度超过父元素宽度，会自动换行

1.2浮动的影响

• 对后面元素的影响，后面元素会整体向前
• 对父元素有影响(父元素的高不能被浮动的元素撑开)

1.3消除浮动影响

• 消除元素对后面元素的影响，在后面的元素设置clear：both/left/right属性
• 消除子元素浮动对父元素的影响，给元素浮动或者设置overflow

定位布局

2.1 相对定位

• 通过position:relative设置元素为相对定位元素
• 元素设置为相对定位之后，不会脱离文档流，不影响其他元素
• 可以通过top/left/right/bottom给相对定位的元素设置位置
• 定位元素：根据原先默认的位置去定位

2.2 绝对定位

• 通过position:absolute来设置绝对定位
• 元素绝对定位后，脱离文档流，影响后面的元素，宽度默认会被内容撑开
• 可以通过left/top/right/bottom给绝对定位的元素设置位置
• 定位规则：根据第一个定位的祖先元素，如果没有定位的祖先元素，根据html元素，祖先元素可以是任意类型的定位

转载于:https://www.cnblogs.com/luck-L/p/9404353.html