在使用margin-top的时候，常常会发现父级元素会随着子级元素一起改变高度，这是因为在html中，当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷。
示例： 原本样式
想要的效果
直接写margin-top得到的结果
解决方法：让父级元素触发BFC Block Formatting Content块级格式化上下文（简称BFC）
触发BFC的方法 1、给父级元素添加float，使其浮动
2、使用定位position
3、使用display
4、使用overflow
需要注意的是，这是一个bug，不能完全解决，使用上面的方法会触发一些其他的问题，所以在解决的时候需要根据实际情况任取其一就行了。
01 修改placeholder样式 02 margin合并/塌陷问题解决方法 具体详见：margin合并/塌陷问题
一：什么是margin塌陷 在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个marg...
margin 塌陷问题 在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现...
今天在CSS3练习弹性盒子中想起了margin的塌陷问题。在这里回忆一下.... margin 塌陷是在父级相对于...
在使用margin-top的时候，常常会发现父级元素会随着子级元素一起改变高度，这是因为在html中，当子...
塌陷问题 当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。 垂直并列（少见） /HTML部分...
一、问题描述 当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。 如图示 最初目的是垂直剧中子...
外边距合并的几种情况 所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两...
文/Jack同学 margin塌陷问题在布局开发的过程中也是经常遇到，原理和解决方法都不难。那margin塌陷是什...
margin塌陷 margin塌陷发生在下列两种情况中 1.垂直并列 对box1我们为其设置margin-bott...
本文标题：margin塌陷的问题
本文链接：https://www.haomeiwen.com/subject/qtdjgftx.html
网友评论