【css】盒子模型 之 概述

摘要

一些基本的概念以及常见使用问题

概述

BFC 是css 中布局的核心 - 盒模型，根据块级元素及行级元素可分为块级容器， 行级容器，但容器内部都遵循 BFC

BFC 空间布局

备注：

IE 的盒子模型和w3c 标准略有不同，两者都包括margin、border、padding、content ，区别如下，

* 标准 W3C 盒子模型的 content 部分不包含其他部分。
* IE 盒子模型的 content 部分包含了 border 和 padding。(IE 6-用的自家模型，IE6,7 怪异， 8+已经 和W3C 同步了)

详情请见：《 IE 与W3C的盒子模型对比 》

常见用法

float

• 清除浮动

1. 为什么出现浮动
   
   因为内部块因为float 属性脱离父容器普通流
2. 怎么解决浮动
   
   方法一：父容器中添加空div 增加 clear:left clear:right clear:both
   
   方法二：父容器形成BFC

• 定位

absolute 1. 以第一非默认布局的元素为基准

• margin collaspe 边距折叠

• overflow