admin管理员组

文章数量:1566678

解决高度塌陷问题

首先来介绍一下高度塌陷问题
1、在浮动布局中,父元素的高度默认是被子元素撑开的。
2、当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离,将会无法撑开父元素的高度,导致父元素的高度丢失,高度丢失后,其下的元素会自动上移,导致页面混乱。

解决高度塌陷的四种方法:

  • BFC
  • clear
  • 使用伪类after
  • clearfix

一、BFC全称 (Block Formatting Context) 块级格式化环境

元素开启BFC的特点:
1、开启BFC的元素不会被浮动元素所覆盖
2、开启BFC的元素子元素和父元素外边距不会重叠
3、开启BFC的元素可以包含子元素

开启BFC的方式:
1、设置元素的浮动
2、将元素设置为行内块元素
3、将元素的overflow设置为一个非visible的值<

本文标签: 四种高度方式