高度塌陷

本来父元素是由子元素抻开的,子元素设置了浮动之后,子元素就脱离文档流了,父元素无法抻开,就会形成高度塌陷

解决高度塌陷


BFC

父元素的垂直外边距不会和子元素重叠

开启BFC的元素不会被浮动元素所覆盖

开启BFC的元素可以包含浮动的子元素

如何开启BFC


设置元素浮动

设置元素的绝对定位

设置元素为inline-block

将元素的overflow设置为一个非visible的值(副作用最小的)

~~~

.box{

border:10px red solid;

overflow:hidden;

}

~~~

你可能感兴趣的:(高度塌陷)