<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>含clear的浮動元素包裹不正確的bug</title>
<style type="text/css">
html, body {
background: #fff;
color: #000;
}
div {
padding: 5px;
margin: 5px;
background-color: #eee;
border: 1px solid #bbb;
clear: left;
color: black;
float: left;
}
</style>
</head>
<body>
<div>
這個<div> 包含 float: left 和 clear: left. 與我們通常理解的表現一致，寬度就是文字內容的寬度。
</div>
<div>
這個同樣是一個 <div>, 左浮動，同時含有 clear: left 的 <div>. 因為這一段的文字內容很長，所以，按照我們通常的理解，這個 <div> 占據的長度應該有整個 body 這么長。但是，在 Internet Explorer 7 下，事與愿違。 這個具有左浮動，同時含有 clear: left 的 <div> 僅僅占據了部分body的內容區域寬度。---- 我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字……
</div>
<div>
這是第3個具有float: left 和 clear: left 的 <div> . 改變你瀏覽器的寬度。
</div>
</body>
</html>
