今天小编跟大家讲解下有关CSS高度坍塌和外边距溢出问题及解决方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS高度坍塌和外边距溢出问题及解决方法 的相关资料,希望小伙伴们看了有所帮助。
高度坍塌成因
父元素div未设置高度子元素全部设置浮动(float: left | right;),浮动元素脱离文档流且不占页面空间由于父元素为设置高度,高度靠内部子元素撑开,而今子元素全部脱离文档流,所以此时父元素的高度为0,给父元素和子元素设置边框(border: 1px solid #000;)或者显示父元素轮廓(outline: 1px solid #000;),会出现子元素超出了父元素的区域范围,即为:高度坍塌现象解决方法
1 根据子元素的最大高度为父元素设置高度
前提是要知道子元素高度2 父元素也设置为浮动
会影响父元素的兄弟元素,可能破坏原有的页面布局3 父元素设置overflow: auto | hidden;属性
只要溢出的内容一律都会被隐藏,可能会隐藏不想被隐藏的部分4 为父元素增加伪元素(推荐)
.div-parent::after { display: table; content:""; clear: both;}外边距溢出成因
父元素div未设置边框第一个子元素设置了上外边距(margin-top: 10rem;)或者 最后一个子元素设置了下外边距(margin-bottom: 10rem;)导致父元素与子元素一起发生相应的偏移的现象,即为:外边距溢出现象解决方法
.div-parent::before {display: table; content:""; } .div-parent::after { display: table;content:""; }来源:爱蒂网