浮动与定位

Posted 2020-09-15

<浮动总结：
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把父级往下带
②子级浮动会导致父级塌陷
③子级超出父级影响其他元素