浮动、定位

浮动

浮动的特点

• 浮动会使元素脱离文档流
• 任何元素设置浮动 都会变为块状元素
• 浮动的元素会对兄弟元素和父元素产生直接影响
• 元素浮动后 默认宽度不再是100%，而是auto

消除浮动的影响

• 设置父元素 overflow属性， 或者父元素也设置浮动
• 在浮动元素后面的兄弟元素 设置 clear:both

相关CSS属性

• float: none / left / rigght
• clear: left / right / both
• position: static / relative / absolute / fixed

定位

相对定位

• 参照自己原先的位置进行定位
• 不脱离文档流，不会对其他元素产生影响

绝对定位

• 参照第一个定位的祖先元素，都没有定位 参照html
• 脱离文档流
• 设置绝对定位变为块状元素

固定定位

• 参照屏幕 定位
• 脱离文档流
• 设置固定定位变为块状元素

布局属性

• display: block / inline / inline-block / none
• float : left / right / none
• clear: left / right / both
• overflow visible（默认） / auto （超出，出现滚动条，不超出不出现）/ hidden（隐藏） / scroll（不管有没有超出都出现滚动条）
• overflow-x
• overflow-y
• visibility: hidden（隐藏） / visible（显示）//占位隐藏
  *display：none//不占位隐藏

定位属性

• position: static / relative / absolute / fixed
• left
• top
• right
• bottom
• z-index 只对定位的元素生效

reset CSS

• 把相关元素的默认样式统统重置
• 我们可以有自己的resetcss