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後即清除浮動,一切回覆了正常
