关于CSS的盒子模型,正确的解释应该是这样的:
把所有 HTML 元素都看作是一个 盒子(Box), 这个盒子包着一层又一层, 这就是盒模型....这个 div 从外到内被分成了四层, 分别是:
Margin(外边距) - 清除边框外的区域, 外边距是透明的.
Border(边框) - 围绕在内边距和内容外的边框....Padding(内边距) - 清除内容周围的区域, 内边距是透明的.
Content(内容) - 盒子的内容, 显示文本和图像等....可以这样来理解, 将 BFC 理解为一个完全封闭的盒子, 盒子内部的元素无论如何摆放, 也不会影响到盒子外面....清除浮动.
这个很容易理解, 浮动的元素会脱离文档的普通流.
如果盒子内的元素是浮动元素且盒子本身不具备 BFC 特性, 那么这个盒子在视觉上并不会包裹住内部浮动元素, 总大小也不包括内部浮动元素.