day06

浮动

• clear:both清除浮动对兄弟元素的影响
• 字围浮动：浮动元素不会挡住非浮动元素的文字部分，所以会形成文字包围浮动元素的效果

块级格式化上下文

BFC(Block Formatting Context),直译为块级格式化上下文
概念:BFC把他看成是元素的一种属性,类似于id title style class...,一旦元素拥有了这种属性,就可以成为一块独立的渲染区域,容器内的元素不会影响容器外的元素.
BFC触发条件:
1. html元素
2. float不为none
3. position为absolute fixed
4. display:inline-block
5. overflow不为visible

BFC作用:
1. 避免外边距重叠
2. 清除浮动
3. 阻止浮动元素覆盖非浮动元素
4. 两列布局 左侧顶宽 右侧自适应
5. 三列布局 左右定宽 中间自适应