解决子标签浮动后父级标签边框塌陷问题

小灰灰 2022-05-17 11:14 236阅读 0赞

### **啥都不说咋们直接上解决办法：** ###

**第一种方法：父标签div中添加overflow：hidden；**

**第二种方法：子标签中添加clear：both；（如果子元素都需要添加float浮动，可以在父标签里面再添加一个空的div，div样式里面添加clear：both；）；**

**第三种方法：给父级元素设置高度。**

**第四种方法：给父标签的伪类编写代码（假设类名为clear）**

**            .clear:after\{  
                content: '';  
                display: block;  
                clear: both;  
            \}**

## 对这种问题给出的解释： ##

就是设置了某种属性后，浏览器就会获取不到标签的边界，自然就会傻乎乎的将父元素内部的子元素都丢到了外边，而不是将它们都包含在内部。

## **详细问题演示：** ##

先举个栗子：

HTML代码如下：

<div id="father" class="clear">
           <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
           <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
           <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
           <div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。</div>
    </div>

CSS代码如下：

div {
        margin:10px;
        padding:5px;
    }
    #father {
        border:1px #000 solid;
    
    }
    .layer01 {
        border:1px #F00 dashed;
        float:left;
    }
    .layer02 {
        border:1px #00F dashed;
        float:right;
    }
    .layer03 {
        border:1px #060 dashed;
        float:left;
    }
    .layer04 {
        border:1px #666 dashed;
        font-size:12px;
        line-height:23px;
        width: 200px;
        float:left;
    }

**运行结果如下：**

![70][]

很显然父元素div（最上面的那个框）是没有将div1，div2，div3，div4（图片以及文字）包含在内部的，这就是边框塌陷。而我们通过前面讲到的三种方法就可以很有效地解决这个问题：

**方法一：**

![70 1][]

**方法二：**

![70 2][]

**方法三（同方法二）：**

![70 3][]

**方法四：**

![70 4][]

**方法五：**

![70 5][]

**修改过后最后的运行结果：**

![70 6][]

成功将子元素都包含进来了。

[70]: /images/20220517/a3cfe668c5024f82938f1c4d592a1c25.png
[70 1]: /images/20220517/637df304b13d4865b5d606f1425b60c4.png
[70 2]: /images/20220517/a990b497e5ed428eb37f0ed0b18e79c5.png
[70 3]: /images/20220517/b8a88f252fdb4a639b0a5cf778a748fd.png
[70 4]: /images/20220517/ca2e455344644d34ae1be97bc34e3505.png
[70 5]: /images/20220517/3b915921f4f44d24a0f28b9bbe6a398a.png
[70 6]: /images/20220517/15441d8ea41f495883ab7d8c7d7b50ed.png