f2为浮动元素,此时f3元素的背景和边框被挤在其下面,但是其内容没有影响
<style type="text/css">
#f1{
width: 100px;
height: 100px;
background-color: red;
}
#f2{
float: left;
width: 50px;
height: 50px;
background-color: blue;
}
#f3{
width: 100px;
height: 100px;
background-color: yellow;
}
#f4{
background-color: green;
}
</style>
</head>
<body style="height: 100%; margin: 0">
<div id="f1" >11111</div>
<div id="f2">22222</div>
<div id="f3"><div id="f4">33333</div></div>
</body>
为f3加上clear:both后即清除浮动,一切回复了正常