css父级边框塌陷问题
<body>
<div id="father">
<div class="layer01"><img src="img/1.jpg" alt=""></div>
<div class="layer02"><img src="img/2.jpg" alt=""></div>
<div class="layer03"><img src="img/3.jpg" alt=""></div>
<div class="layer04">
浮动的盒子可以向左，也可以向右。。。。。哈哈啊哈哈哈哈哈哈
</div>
<!-- <div class="clear"></div>-->
</div>
</body>
1234567891011
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000 solid;
/*height: 500px;*/
/*overflow: hidden;*/
}
/*#father:after{
content: '';
display: block;
clear: both;
}*/
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float: left;
}
.layer02{
border: 1px #00F dashed;
display: inline-block;
float: left;
}
.layer03{
border: 1px #060 dashed;
display: inline-block;
float: left;
}
/*
clear: left; 左侧不允许有浮动元素
clear: right; 右侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
*/
.layer04{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
clear: both;
}
/*
.clear{
clear: both;
margin: 0;
padding: 0;
}
*/
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
