P40-前端基础-BFC解决浮动带来的高度塌陷问题

P40-前端基础-BFC解决浮动带来的高度塌陷问题

1.概述

使用浮动有利于页面的布局，但是他也有一个问题就是高度塌陷。

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，

子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失

2.浮动高度塌陷展示

2.1.设置浮动前父元素高度不会塌陷

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

2.2.子元素浮动父元素高度塌陷

子元素开启浮动

父元素高度塌陷

3.解决高度塌陷

BFC(Block Formatting Context) 块级格式化环境

BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域

元素开启BFC后的特点：

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

2.开启BFC的元素子元素和父元素外边距不会重叠

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

可以通过一些特殊方式来开启元素的BFC：

1、设置元素的浮动（不推荐）

2、将元素设置为行内块元素（不推荐）

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

常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素

3.1.父元素开启BFC前后效果对比

父元素未开启BFC前高度塌陷带来的三个问题

父元素开启BFC解决高度塌陷三个问题

3.2.父元素开启BFC之父元素开启浮动

父元素开启浮动

父元素开启浮动效果

3.3.父元素开启BFC之父元素开启行内块元素

设置父元素样式为行内块元素

父元素开启行内块元素效果

3.4.父元素开启BFC之父元素开启overflow（推荐）

父元素开启overflow

父元素开启overflow效果

web前端 容器

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。