前端-CSS3学习笔记十

日期：2022/1/23

P64_高度塌陷和BFC

1.高度塌陷问题：
        在浮动布局中，父元素的高度默认是被子元素撑开的
                在子元素浮动以后，其完全脱离文档流，子元素从文档流中脱离
                将会无法撑起父元素的高度，导致父元素的高度丢失

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

        所以高度塌陷是浮动布局中比较常见的一个问题
2.BFC（Block Formatting Content）块级格式化环境
        BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
                开启BFC该元素会变成一个独立的布局区域
        元素开启BFC后的特点：
                1.开启BFC的元素不会被浮动元素所覆盖
                2.开启BFC的元素子元素和父元素外边距不会重叠
                3.开启BFC的元素可以包含浮动的子元素

        可以通过一些特殊方式来开启元素的BFC:
                1.设置元素的浮动（不推荐）
                2.将元素设置为行内块元素（不推荐）
                3.将元素的overflow设置为一个非visible的值
                        常用的方式：为元素设置overflow：hidden开启其BFC以使其可以包含浮动元素

P65_BFC的演示