首页 > 代码库 > 浮动与定位

浮动与定位

<浮动总结:
1.浮动的元素脱离文档流。
2.浮动的元素不能覆盖内联元素。
3.后面的浮动元素不能覆盖前面的元素。如果前面元素不是块级元素会被后面的浮动元素会上移,导致元素向旁边移动。


内联元素:没有width和height,不能设置margin-top和margin-buttom。
内联块级元素:有width和height,可以设置margin
块级元素:有width和height,可以设置margin

 

<定位总结:
z-index属性:必须和定位一起用。
相对定位:relative相对于原来的位子进行移动(元素是普通文档流)
绝对定位:absolute相对于最近的以定位的父级元素或最初包含块进行移动(元素脱离普通文档流)
固定定位:fix相对于浏览器边框进行移动(元素脱离普通文档流)


BFC:block formatting context(块级格式化上下文) overflow:hidden会触发bfc
①子级margin-top把父级往下带
②子级浮动会导致父级塌陷
③子级超出父级影响其他元素

浮动与定位