為什麼float:right的元素會發生換行

admin發表於2017-02-06
採用浮動的元素會脫離文件流，所以能覆蓋在文件流中的元素之上。

但是貌似右浮動有點不符合此規律，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  width:50px;
  height:50px;
}
.float_right{
  background:red;
  float:right;
}
.right{
  background:blue;
}
</style> 
</head> 
<body> 
<div class="clear_right"></div>
<div class="right"></div>
</body> 
</html>

第二個div右浮動，按照原理，它脫離文件流不受正常文件流的羈絆，可以與前一個div元素位於同一行，但是事實卻換行了。其實這裡有這麼一個規則:任何浮動元素都不可能超過原來所處文件留位置的上邊界。

相關文章