高度塌陷

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

解决高度塌陷


BFC

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

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

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

如何开启BFC


设置元素浮动

设置元素的绝对定位

设置元素为inline-block

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

~~~

.box{

border:10px red solid;

overflow:hidden;

}

~~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 高度塌陷: 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高 但是当为子元素设置浮动以...
    啊烟雨阅读 601评论 0 0
  • 高度塌陷在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高,但是当为子元素设置浮动以后,...
    一雨成慕阅读 495评论 0 0
  • 什么是高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高但是当为子元素设置浮动...
    你猜_e00d阅读 1,588评论 1 0
  • 本来父元素是由子元素抻开的,子元素设置了浮动之后,子元素就脱离文档流了,父元素无法抻开,就会形成高度塌陷 解决高度...
    Forever_f59e阅读 65评论 0 0
  • 今年经历了买房,看之前的帖子都太冗长,自己来个实用版的,算是提醒自己吧。 1.定时间节点的时候要慎重!一定要搞清楚...
    小小捻阅读 170评论 0 0