09.高度塌陷和BFC

最新推荐文章于 2024-07-24 10:05:23 发布

Edshine

最新推荐文章于 2024-07-24 10:05:23 发布

阅读量54

点赞数

分类专栏： HTML&&CSS 文章标签： css html5 html

本文链接：https://blog.csdn.net/Edshine/article/details/120340034

版权

HTML&&CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

高度塌陷和BFC

文章目录

高度塌陷和BFC

1.高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱
所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！

        .outer{
            border: 10px red solid;}
        .inner{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float:left;}

<body>

    <div class="outer">

        <div class="inner"></div>

    </div>

    <div style="width: 200px;height: 200px;background-color:yellow;"></div>
    
</body>

outer最为父元素，其内容取决于子元素inner，被其撑开，我们想要让子元素中的内容水平排列，设置浮动后，会脱离文档流，此为高度塌陷问题

如何解决-------BFC

2.BFC

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

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

元素开启BFC后的特点：

不会被浮动元素覆盖
子元素和父元素的外边距不会重叠
可以包含浮动的元素

但是开启BFC同样会产生许多问题，以下是开启BFC的几种方式：

将父元素设置为浮动（因为父元素浮动了，下方元素上升，会被遮盖）
设置行内块元素浮动（不再独占一行，宽度发生变化，且会产生空隙）
设置overflow：score（会带滚动条）/auto/hidden（常用），其副作用依然有，

具体更多的开启方式：可去zeal文档进行查询

3. clear

<style>

        div{
            font-size: 50px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }

        .box2{
            width: 400px;
            height: 150px;
            background-color: #ff0;
            float: right;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: orange;
         clear: both;/*清除浮动元素的最大影响*/
        }
<style>

<body>

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div> 
    
</body>

由于box1的浮动，导致box3位置上移

也就是box3收到了box1浮动的影响，位置发生了改变

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，

可以通过clear属性来清除浮动元素对当前元素所产生的影响

clear

作用：清除浮动元素对当前元素所产生的影响
可选值：
- left 清除左侧浮动元素对当前元素的影响
- right 清除右侧浮动元素对当前元素的影响
- both 清除两侧中最大影响的那侧

原理：

设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响

4.高度塌陷的最终解决方案（after）

<body>

    <div class="box1">
        <div class="box2"></div>
        <!-- <div class="box3">aa</div> -->
    </div>
    
</body>

    <style>
        .box1{
            border: 10px red solid;

            /* overflow: hidden; */
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }

        .box3{
            clear: both;
        }

        .box1::after{
            content: '';
            display: block;
            clear: both;
        }
        
    </style>

子元素将父元素撑开，但是呢，由于，box2脱离文档流致使高度塌陷，故box2一浮动，那就塌陷了。
若box1中不止是一个子元素，有多个子元素，那么将box1撑开的功能能转移到box3上，但是box2还是溢出了啊？怎么办呢？不能把box3的高度写死。。
box3中写clear:both；消除了box2对其的影响，究其根本是box3的外边距，将box1给撑起来了
（以上建议重新回顾b站视频教程直观理解）
但是

box3出现的原因是为解决表现的问题，但是div是属于html里的结构，box3的出现显得很多余，不合适，我们希望CSS的问题由自己解决，而不是由HTML解决。

于是啊————after出来了

after

伪元素，表示的是元素的最后
行内元素，不独占一行，用clear清除了浮动影响也没能完全解决问题
于是乎，我们将其转化为块元素，嘿嘿解决了

5.clearfix（清除浮动修复）

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        /* .box1::before{
            content: '';
            display: table;
        } */

        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }

/* clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可 */
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
    </style>

<body>

    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
    
</body>

推导:
解决垂直方向子元素外边距的重叠
要用一个东西把上面的外边距和下面的外边距隔离
在box1和box2之间添加一个元素试图解决问题，before，使得子元素和父元素不折叠，但是啊，会造成子元素的溢出问题（丑~~
将before内的display设置为table
clearfix可同时解决高度塌陷和外边距问题

    .clearfix::before,
    .clearfix::after{
        content: '';
        display: table;
        clear: both;}

Edshine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
09.高度塌陷和BFC

高度塌陷和BFC文章目录高度塌陷和BFC1.高度塌陷2.BFC3. clear4.高度塌陷的最终解决方案（after）***after***5.clearfix（清除浮动修复）1.高度塌陷在浮动布局中，父元素的高度默认是被子元素撑开的当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！ .oute
复制链接

扫一扫

专栏目录