关于浮动遇到的高度塌陷和外边距塌陷

最新推荐文章于 2022-08-05 13:14:04 发布

皮卡丘与pig

最新推荐文章于 2022-08-05 13:14:04 发布

阅读量300

点赞数 3

本文链接：https://blog.csdn.net/weixin_52079958/article/details/119384892

版权

众所周知，浮动会脱离文档流，因此会出现一些问题，今天我来给大家提供一些解决方案

一、浮动造成的高度塌陷

<head>
    <style>
        .box1 {         
            border: 1px solid black;
        }
        .box2 {
            float: left;
            height: 200px;
            width: 400px;
            background: blue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

解决高度塌陷的问题，我们可以用清除浮动的方法。而清除浮动共有四种方法

1.父级添加 overflow 属性（overflow: hidden;）

<head>
    <style>
        .box1 {
            overflow: hidden;         
            border: 1px solid black;
        }
        .box2 {
            float: left;
            height: 200px;
            width: 400px;
            background: blue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

2.额外标签法(隔墙法)（<div style="clear:both"></div>）

<head>
    <style>
        .box1 {        
            border: 1px solid black;
        }
        .box2 {
            float: left;
            height: 200px;
            width: 400px;
            background: blue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div style="clear:both"></div>
    </div>
</body>

3.父级添加after伪元素

.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}

<head>
    <style>
        .box1:after {  
            content: ""; 
            display: block; 
            height: 0; 
            clear: both; 
            visibility: hidden;  
        } 
        .box1 {  /* IE6、7 专有 */ 
            *zoom: 1;
        }
        .box1 {        
            border: 1px solid black;
        }
        .box2 {
            float: left;
            height: 200px;
            width: 400px;
            background: blue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

4.父级添加双伪元素

.clearfix::before,.clearfix::after {
content:"";
display:table;
}
.clearfix::after {
clear:both;
}
.clearfix {
*zoom:1;
}

<head>
    <style>
        .box1::before,.box1::after {
            content:"";
            display:table; 
        }
        .box1::after {
            clear:both;
        }
        .box1 {
            *zoom:1;
        }
        .box1 {        
            border: 1px solid black;
        }
        .box2 {
            float: left;
            height: 200px;
            width: 400px;
            background: blue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

好了，以上就是关于使用清除浮动的四种方法来解决浮动造成的高度塌陷的详细说明了

二、浮动造成的外边距塌陷

我为大家带来一种比较简便的方法：

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

<head>
    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        /* ul li:hover {
           1. 如果盒子没有定位，则鼠标经过添加相对定位即可
        position: relative;
        border: 1px solid blue;

       } */
        ul li:hover {
            /* 2.如果li都有定位，则利用 z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
       }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

皮卡丘与pig

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
关于浮动遇到的高度塌陷和外边距塌陷

众所周知，浮动会脱离文档流，因此会出现一些问题，今天我来给大家提供一些解决方案一、浮动造成的高度塌陷<head> <style> .box1 { border: 1px solid black; } .box2 { float: left; height: 200px; width: 400px;
复制链接

扫一扫