2.兄弟塌陷

最新推荐文章于 2024-07-22 15:19:55 发布

Clement_524

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量70

点赞数

文章标签：前端 servlet html

本文链接：https://blog.csdn.net/weixin_73404129/article/details/127219891

版权

原因：垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠

解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面反之亦然

触发bfc只有overflow属性能用

<!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>
        .box1,
        .box2 {
            width: 200px;
            height: 200px;
        }

        .box1 {
            background-color: tomato;
            margin-bottom: 100px;


        }

        .box2 {
            background-color: green;

            margin-top: 100px;
            margin-top: 200px;
        }

        /* 解决方法，给盒子套一个父盒子，加 overflow: hidden;*/
        .father {
            /* 触发bfc */
            overflow: hidden;
            overflow: scroll;
            overflow: auto;



        }

        /*    解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面  反之亦然 */
    </style>
</head>

<body>
    <div class="father">
        <div class="box1">box1</div>
    </div>


    <div class="father">
        <div class="box2">box1</div>
    </div>


    <!-- 兄弟关系外间距塌陷问题
    现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；
    两个值一样大，取当前值
    两个值不同，取较大值
    原因：并列关系的两个元素共用了一个外间距区域
    解决办法：
    分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden' -->
</body>

</html>

3.防止字体环绕

原因：浮动脱离标准流不脱离文本流浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠

触发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>
        .wrap {
            width: 700px;
            height: 500px;
            border: 2px solid red;
        }

        .wrap .box1 {
            width: 200px;
            height: 200px;
            background: pink;

            float: left;
        }

        .wrap .box2 {
            width: 300px;
            height: 200px;
            background: yellowgreen;

            /* 触发bfc */

            /* float: left;
            float: right; */
            /* 
            overflow: hidden;
            overflow: scroll;
            overflow: auto; */

            display: inline-block;


            /* 不能用 */
            /* position: absolute;
            position: fixed; */
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="box1">box1</div>
        <div class="box2">box23.防止字体环绕3.防环绕3.防环绕3.防止字体环绕</div>
        <!--  原因：浮动 不会脱离文本流 浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字 反而还会环绕浮动的盒子。

        • 解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

        • BFC 的区域不会与 float 的标签区域重叠 -->
    </div>
</body>

</html>