学习会分享

1. float

• 1.1 目的: 指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性

• 1.2 属性值: left, right, none

• 1.3 实际效果: 元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移,一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。(说白话就是仅对 float 后的元素起作用)

• 1.4 清除浮动:

  • clear: 一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面, 前提需该元素为 block 元素

  • clear: left/right/both

• 1.5 注意事项:

  • i: 由于float意味着使用块布局，它在某些情况下修改display 值的计算值, 基本上可以理解为 display 变成了 block
  • ii: 浮动父元素塌陷

  float-demo

2. BFC 模型 (Block Formatting Context)

• 2.1 块格式化上下文: 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域

• 2.2 如何形成 BFC:

  • 根元素（）
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
    • 更多详情

• 2.2 注意点:

  • i: 同一个 BFC 下外边距会发生折叠 BFC-demo