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

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

第一种方法：父标签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;
}

运行结果如下：

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

方法一：

 

方法二：

     

 

方法三（同方法二）：

 

方法四：

 

方法五：

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

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