📚块级元素的流特性与响应式布局
🤔什么是块级元素的流特性
块级元素的流特性是指：块级元素盒子在默认情况下会自动填满父级容器。也就是说元素的content、padding、margin宽度会彼此相互调和，确保最终加在一起的总宽度等于父容器宽度。
🔧利用流特性实现多栏布局
利用块元素的流特性，如果给块元素设置固定的左右padding或margin，盒子就只有content会随着父容器的大小变化而变化。此时放置脱离文档流的float元素或绝对定位元素到留白处，就实现了多栏布局。例如：
这种方案有明显的缺点，就是必须知道留白尺寸。如果留白宽度是未知的，又希望能够实现多栏布局该怎么办呢？利用BFC的布局可以帮到你。
📚BFC与响应式布局
🤔什么是BFC
BFC(Block Formatting Context)翻译过来就是“块级格式化上下文”。
🤔如何触发BFC
常见的BFC触发方式有下面几种：
float : !none。overflow : [ auto | scroll | hidden]display : [ table-cell | table-caption | inline-block ]position : ![ relative || static]
🔧利用BFC实现自适应布局
利用BFC的独立性特点，尝试再一次实现多栏布局。
首先，普通情况下正常文本流与float图片在一起时，会表现出环绕效果：
块级元素的流特性是指：块级元素盒子在默认情况下会自动填满父级容器。也就是说元素的`content`、`padding`、`margin`宽度会彼此相互调和，确保最终加在一起的总宽度等于父容器宽度。BFC(Block Formatting Context)翻译过来就是“块级格式化上下文”。
图片和文本块是兄弟元素，由于图片使用了属性float脱离文档流，它和后来填补空位跟上的文本块发生了重叠。float的特性之一是发生重叠时，文字会环绕float元素而不是被遮挡（float的设计初衷就是为了实现文字环绕效果）。
按照上面介绍的BFC特性，可以设想触发了文本块的BFC后，文本块会和图片相互独立，不再彼此影响。所以给文本块添加属性overflow:hidden：
块级元素的流特性是指：块级元素盒子在默认情况下会自动填满父级容器。也就是说元素的`content`、`padding`、`margin`宽度会彼此相互调和，确保最终加在一起的总宽度等于父容器宽度。BFC(Block Formatting Context)翻译过来就是“块级格式化上下文”。
果然，文字不再环绕图片了，图片和文本块也会响应容器大小的变化而自动调整。
🚧注意
给浮动图片添加margin-right:15px ：
块级元素的流特性是指：块级元素盒子在默认情况下会自动填满父级容器。也就是说元素的`content`、`padding`、`margin`宽度会彼此相互调和，确保最终加在一起的总宽度等于父容器宽度。BFC(Block Formatting Context)翻译过来就是“块级格式化上下文”。
给文本块添加margin-left:15px ：
块级元素的流特性是指：块级元素盒子在默认情况下会自动填满父级容器。也就是说元素的`content`、`padding`、`margin`宽度会彼此相互调和，确保最终加在一起的总宽度等于父容器宽度。BFC(Block Formatting Context)翻译过来就是“块级格式化上下文”。
给文本块添加足够大的左边距margin-left:calc(30% + 15px)(图片宽度30%)：
块级元素的流特性是指：块级元素盒子在默认情况下会自动填满父级容器。也就是说元素的`content`、`padding`、`margin`宽度会彼此相互调和，确保最终加在一起的总宽度等于父容器宽度。BFC(Block Formatting Context)翻译过来就是“块级格式化上下文”。
🌵最后
- 点📖 查看BFC标准内容，致敬