admin管理员组

文章数量:1794759

css 高度塌陷和BFC,解决方法

高度塌陷问题：

        在浮动布局中，父元素的高度默认是被子元素撑开的。

•                 子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离。
•                  将会无法撑起父元素的高度，导致父元素的高度丢失

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

        高度塌陷是浮动布局中的常见问题，需要处理

解决方案：开启BFC

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

        BFC是css中的隐含属性，可以为一个元素开启BFC

                开启BFC该元素会变成一个独立的布局区域

        元素开启BFC后的特点：       

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

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

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

        开启BFC的方式：

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

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

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

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

clear元素

.box1{width:200px;height:200px;background-color:red;float: left;}.box2{width:300px;height:300px;background-color:#999;float: right;}.box3{width: 150px;height: 150px;background-color: aquamarine;clear: both;}

由于Box1浮动,导致Box3位置上移,即box3受到box1浮动的影响,位置发生改变，若不想某元素因其他元素浮动而受影响，可以通过clear属性来清除浮动对当前元素产生的影响

clear元素

        作用：清除元素对当前元素产生的影响

         可选值：

                left:清除左侧浮动元素对当前元素的影响

                right:清除右侧浮动对当前元素的影响

                both:清除两侧中最大影响的那侧

        原理：设置浮动后，浏览器自动为元素添加一个上外边距，以使其位置不受影响

本文标签： css 高度塌陷和BFC解决方法