当前位置：网站首页>高度塌陷和BFC

高度塌陷和BFC

2022-07-27 12:48:00 【不好意思，此人不存在】

高度塌陷和BFC

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> .outer{
      border: 10px red solid; overflow: hidden; } .inner{
      width: 100px; height: 100px; background-color: #bbffaa; /* 高度塌陷的问题： 在浮动布局中，父元素的高度默认是被子元素撑开的 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离 将会无法撑起父元素的高度，导致父元素的高度丢失 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱 所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理 */ float: left; } </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>

    </div>
</body>
</html>

           BFC（Block Formatting Context）块级格式化环境
               -BFC是一个css中的一个隐含的属性，可以为一个元素开启BFC
                 开启BFC钙元素会变成一个独立的布局区域
                -元素开启BFC后的特点：
                    1、开启BFC的元素不会被浮动元素所覆盖
                    2、开启BFC的元素子元素和父元素外边距不会重叠
                    3、开启BFC的元素可以包含浮动的子元素

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

版权声明
本文为[不好意思，此人不存在]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_44278908/article/details/113941781

边栏推荐

猜你喜欢

随机推荐