含clear的浮動(dòng)元素包裹不正確的bug
老師視頻里的demo,不是習(xí)題!!不是習(xí)題?。?!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>含clear的浮動(dòng)元素包裹不正確的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>
這個(gè)<div> 包含 float: left 和 clear: left. 與我們通常理解的表現(xiàn)一致,寬度就是文字內(nèi)容的寬度。
</div>
<div>
這個(gè)同樣是一個(gè) <div>, 左浮動(dòng),同時(shí)含有 clear: left 的 <div>. 因?yàn)檫@一段的文字內(nèi)容很長(zhǎng),所以,按照我們通常的理解,這個(gè) <div> 占據(jù)的長(zhǎng)度應(yīng)該有整個(gè) body 這么長(zhǎng)。但是,在 Internet Explorer 7 下,事與愿違。 這個(gè)具有左浮動(dòng),同時(shí)含有 clear: left 的 <div> 僅僅占據(jù)了部分body的內(nèi)容區(qū)域?qū)挾取?--- 我是占位置的文字,我是占位置的文字,我是占位置的文字,我是占位置的文字,我是占位置的文字,我是占位置的文字,我是占位置的文字……
</div>
<div>
這是第3個(gè)具有float: left 和 clear: left 的 <div> . 改變你瀏覽器的寬度。
</div>
</body>
</html>
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求