当父级里面的子元素全部使用浮动后，所有子元素脱离了标准文档流，使得父级内部没有其内容，会造成边框塌陷现象。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="img/photo-1.jpg" alt="日用品"/></div>
<div class="layer02"><img src="img/photo-2.jpg" alt="图书"/></div>
<div class="layer03"><img src="img/photo-3.jpg" alt="鞋子"/></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页*有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
</div>
</div>
</body>
</html>
使用外部样式表：
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
}
/* 让父级里面的子元素全部浮动*/
.layer01,.layer02,.layer03,.layer04{
float: left;
}
.layer01 {
border:1px #F00 dashed;
}
.layer02 {
border:1px #00F dashed;
}
.layer03 {
border:1px #060 dashed;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
}
浮动之后父级边框塌陷了，解决的四种方法
<!-- 第一种方式：父级元素里最后一个为块元素，使用该块元素的属性，对前面的兄弟元素清除两端浮动 -->
<!-- 加一个<h1></h1> 对该块元素h1使用清除浮动 -->
<!-- 第二种方式：直观，直接可以给父级加高度 -->
<!-- 第三种：父级元素overflow -->
对父级元素#father{overflow: hidden;}
<!-- 第四种：伪类after -->
#father:after{
display: block;
content: ""; /*假设父级里面有内容，然后用clear清除，跟第一种方法类似*/
clear: both;
}
结果：
浮动消除 问题解决！！！