高度塌陷-BFC 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 内容还会很多，会空出很多空间，一般情况下，高度heght可以变化 */

/* BFC：块级格式化环境
隐含属性，开启后元素会变成独立的布局区域

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

通过特殊方式开启BFC：
1.设置浮动（不推荐
2.将元素设置为行内块元素（不推荐
3.将overflow设置为非visible

开启BFC使其包含浮动元素（临时处理方案
 */
.outer
{
    border: red 10px solid;
overflow: hidden;
}
/* 高度塌陷的问题
当浮动布局中，父元素的高度默认被子元素撑开
当子元素浮动后，会从文档流中脱离，子元素从文档流中脱离
将无法撑起父元素的高度，导致父元素的高度丢失 

父元素高度丢失以后，齐下的元素会自动上移，会布局混乱

所以高度塌陷是浮动布局中比较常见的问题，必须解决

*/
.inner
{
    width: 100px;
    height: 100px;
    background-color: rgb(20, 220, 30);
    float: left;
}
    </style>
</head>
<body>
    <div class="outer"> 
        <div class="inner"></div>
    </div>
    <div style="width: 100px; height: 100px; background-color: cyan;"></div>
</body>
</html>

 

posted @ 2021-02-18 22:25  俗气小博  阅读(23)  评论(0)    收藏  举报