浮动的缺陷

浮动的缺陷

高度塌陷

在浮动的布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素脱离文档流后则无法撑起父元素的高度，导致父元素高度丢失。

父元素高度丢失后，其下的元素会自动上移，导致页面的布局混乱。

开启BFC的特点

1. 不会被浮动元素所覆盖

2. 子元素和父元素外边距不会重叠

3. 可以包含浮动的子元素

如何开启BFC

1. 设置元素的浮动

2. 将元素设置为行内元素

3. 将元素的overflow设置为一个非visible的值