1、什么是margin 塌陷
1、场景
互相嵌套 的 块级元素,子元素的 margin-top
会作用在父元素上
2、结果
导致父元素一起往下移动
父子嵌套的元素垂直方向的
margin
取最大值
2、如何解决
1、BFC
什么是BFC和作用
Block Formatting Context
,中文叫块级格式上下文。
CSS
将HTML
的每一个元素都当成一个盒子,而且它进一步的认为每一个盒子里面都有一套正常的语法规则或者叫渲染规则,它能根据这个规则将写的HTML元素绘制出来,但是我们可以通过一些特定的手段触发BFC
,让其所符合的语法规则和原来的语法规则有点不一样。
如何触发BFC如何触发BFC
触发BFC
方法:
float
属性为left
/right
overflow
为hidden
/scroll
/auto
position
为absolute
/fixed
display
为inline-block
/table-cell
/table-caption