CSS浮动与定位

浮动

浮动用于实现并排

float:left; 向左边贴靠

注意事项：

• 如果要使用浮动，并排的盒子都需要设置浮动
• 父盒子宽度需要足够，否则会“下坠”
• 子盒子按顺序进行贴靠
• 设置浮动的元素脱离了块级元素、行内元素等的限制，脱离了标准的文档流，无论如何都可以设置宽度和高度
• 垂直的盒子不要使用浮动，需要并排的场合才要使用它
• 大盒子内部的小盒子又可以继续使用浮动，浮动可以嵌套

BFC规范

BFC（Box Formatting Context，块级格式化上下文）

容器内外元素间互不影响

创建方法：

• 设置浮动
• 设置定位（局部或固定）
• display:inline-block、flex、inline-flex
• overflow:hidden(溢出隐藏：溢出盒子边框的内容被隐藏，padding部分的溢出还在)

没啥实际意义的BFC作用(?)：

BFC可以取消盒子的margin塌陷（垂直方向margin不叠加的现象)

BFC可以阻止元素被浮动元素覆盖

内部有浮动的盒子要设置height属性

清除浮动

浮动一定要封闭到一个盒子中，否则会对页面的后续元素产生影响

方法:

• 形成BFC（推荐overflow)
• 给后续的父盒子设置clear:both（清除左右浮动对自己的影响）margin可能会失效
• 使用::after伪元素，同时使用clear:both   margin不失效
• 两个盒子间隔一个带有clear:both的盒子