初值未知且需要传递中间变量的微分方程参数拟合

Java基础学习笔记 Chapter14

  返回  

清除浮动方法梳理

2021/8/20 20:30:19 浏览:

当一个父容器中的子元素变为浮动后,父容器就会坍塌,下面的盒子也会就此补充上来

因此,为了解决这样的问题,就有了清除浮动的几种方案:

<!-- 清除浮动 -->
<div class="container">
    <div class="inner"></div>
</div>

<style>
    html, body {
        margin: 0;
        padding: 0;
    }

    .container {
        width: 100%;
        background-color: gold;
    }

    .inner {
        background-color: tomato;
        height: 30px;
        width: 40px;
        float: left;
    }
 </style>

此时,父容器已经坍塌:
在这里插入图片描述
变成
在这里插入图片描述
解决办法有以下几种:

(1)创建BFC

    .clearfix-1 {
        overflow: hidden;
    }
    .clearfix-2 {
        overflow: auto;
    }

缺点是超出盒子外的部分就被隐藏掉了,所以这个需要在合适的场景中使用

(2)使用clear:both
利用伪元素,作用在父容器上:

    .clearfix-3 {}
    .clearfix-3:after {
        content: "";
        display: block;
        clear: both;
    }

或者创建一个br、hr放在浮动元素后

<!-- 清除浮动 -->
<div class="container">
    <div class="inner"></div>
    <br class="clearfix-4">
</div>
<style>
    .clearfix-4 {
        clear: both;
    }
</style>

至于为什么clear:both有这个能力呢,todo

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号