浮动：父级边框塌陷问题（存疑）
声明
该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明
父级边框塌陷问题
解决方案
1、重设父级元素高度
<style>
div{
background-color: green;
height: 30px;
width: auto;
margin: 0px;
}
.img1,.img2{
float: left;
opacity: 0.5;
}
</style>
<body>
<div>
<img class="img1" src="../images/2.jpg" height="250px" width="200px"/>
<img class="img2" src="../images/3.jpg" height="200px" width="250px"/>
</div>
</body>
2、在最后增加一个空的div标签，清除浮动
<style>
div{
border:3px solid #008000;
width: auto;
margin: 0px;
}
.img1,.img2{
float: left;
opacity: 0.5;
}
.clear{
clear: both;
margin: 0px;
padding: 0px;
border:1px solid red;
height: 5px;
}
</style>
<body>
<div>
<img class="img1" src="../images/2.jpg" height="250px" width="200px"/>
<img class="img2" src="../images/3.jpg" height="200px" width="250px"/>
<div class="clear"></div>
</div>
</body>
3、添加overflow属性
大多数情况下是hidden，也可以用auto。但用hidden可以保证父类内容不可见，auto超出会加入滚动条
<style>
div{
border:1px solid green;
width: auto;
margin: 0px;
overflow: hidden;
}
.img1,.img2{
float: left;
opacity: 0.5;
}
</style>
<body>
<div>
<img class="img1" src="../images/2.jpg" height="250px" width="200px"/>
<img class="img2" src="../images/3.jpg" height="200px" width="250px"/>
</div>
</body>
4、使用伪元素解决
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
注意伪类和伪元素的区别，伪类是:focus，:hover 以及 < a >标签的:link，visited等。伪元素较常见的有:before，:after等
注释掉之前加入的内容，然后在css加入新的一段代码
<style>
div{
border:3px solid #008000;
width: auto;
margin: 0px;
}
.img1,.img2{
float: left;
opacity: 0.5;
}
.content:after{
content: "";
display: block;
clear: both;
}
</style>
<body>
<div class="content">
<img class="img1" src="../images/2.jpg" height="250px" width="200px"/>
<img class="img2" src="../images/3.jpg" height="200px" width="250px"/>
</div>
</body>
