CSS知识点学习五

浮动：实现盒子并排

• 父盒子宽度足够
• 顺序贴靠特性：没有足够空间会寻找再前一个兄弟元素
• 浮动元素一定能够设置宽高，脱离了标准文档流，无块级元素和行内元素之分，span，a也可以
• 只有并排显示的盒子才设置浮动，垂直显示的盒子不设置浮动

bfc规范 块级格式化上下文，页面上一个隔离的独立容器，容器中的子元素与外面的元素互不影响。

形成bfc:

• float的值不是none
• position的值不是static或relative
• display的值为inline-block,flex或inline-flex

Overflow:hidden

溢出隐藏，溢出盒子的文字被隐藏

bfc其他作用：取消盒子的margin塌陷，阻止元素被浮动元素覆盖

清除浮动：

内部浮动的父盒子形成BFC，overflow:hidden

后面的父盒子设置clear:both,但是margin会失效

::after伪元素，一定要记得转为块级元素

在父盒子之间“隔墙”，隔一个携带clear:both的盒子

相对定位：

盒子相对于原来的位置进行位置调整

• position:relative
• Top,left,right,bottom
• 四个方位移动，取值可以是负数，相反的方向移动
• 本质上仍然在原来的位置，只不过渲染在别的位置
• 用来微调元素位置，可以当做绝对定位的参考盒子

绝对定位：以坐标进行位置描述

• Position:absolute
• Top,left,right,bottom
• 绝对定位脱离标准文档流
• 将释放自己的位置
• 会以自己的祖先元素，离自己最近的拥有定位属性的盒子作为基准点，这个盒子通常是相对定位的，叫做子绝父相