CSS 里只是用到了簡單的左浮動
html代碼：一個大的div里面有四個小塊
先看個簡單的畫圖比喻，我就是想問，現在已經有4個浮動塊，當我增加第5個塊的時候，為什么第5個塊不出現在位置1而出現在位置2？
百度搜索看了幾篇博客，里面有的提到這個現象，但都沒給相應的解釋
頁面運行的圖片
摘抄一段博客資料，資料的4.3里也沒解釋通
哪個兄弟給指點一下，小弟困惑一上午了！
uj5u.com熱心網友回復：
你的contain是怎么寫的uj5u.com熱心網友回復：
container只是簡單的限寬，居中
.container {
display: block;
max-width: 1080px;
margin: 0 auto;
}
uj5u.com熱心網友回復：
直接給代碼
可能那些大佬就能理解了
uj5u.com熱心網友回復：
你只要給.col-9設定高度就行
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8
.col-9{
display:block;
min-height:1px;
width:300px;
height:30px;
float:left;
}
uj5u.com熱心網友回復：
https://wenda.so.com/q/1532776806217655uj5u.com熱心網友回復：
首先，需要了解一個float相關的術語“浮動參考”（float reference）。浮動參考指的是浮動元素對齊參考的物體。即是“檔案流中的當前行”，也就是float元素如果改為inline元素并且不浮動情況下應該在當前行內的位置。
float元素不論是左浮動還是右浮動，float元素的頂端都會與浮動參考對齊。也就是與float元素如果不浮動情況下應該在的行的頂端對齊。
你第4個浮動塊右邊已經沒有空間放第5個塊了，第4個浮動塊之后的檔案流就會到達第4個浮動塊的下一行，第5個塊的浮動參考就是第4個浮動塊的下一行。
uj5u.com熱心網友回復：
弄了個簡單的代碼，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗浮動</title>
<style type="text/css">
.container {
max-width: 1080px;
margin: 0 auto;
height: 600px;
border: 2px solid black;
}
.box1,.box2,.box3,.box4,.box5{
float:left;
border: 2px solid red;
}
.box1{
width: 20%;
height: 40px;
}
.box2{
width: 50%;
height: 70px;
}
.box3{
width: 20%;
height: 40px;
}
.box4{
width: 20%;
height: 40px;
}
.box5{
width: 20%;
height: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
</html>
這段html效果如圖
我想知道為什么浮動的box5是對齊box4的底部那條平行線靠在父div左邊，而不是擠在1的正下方，相關資料沒找到....
uj5u.com熱心網友回復：
兄弟你對問題理解可能有偏差，這里我主要是沒搞懂元素浮動后的位置它是如何選擇的，可以參考7樓的回復
uj5u.com熱心網友回復：
和HTML的決議也有點關系html的決議是從上而下的
你把5 和2換個位置試試
uj5u.com熱心網友回復：
<div class="box1">1</div>
<div class="box5">【2】</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box2">【5】</div>
uj5u.com熱心網友回復：
前輩，我看了四五遍你這段話，加上搜了搜相關的浮動參考博客，但還是不太理解。
“也就是float元素如果改為inline元素并且不浮動情況下應該在當前行內的位置。”
你把對“float元素的位置”的判斷轉換成了判斷“改為inline元素并且不浮動情況下應該在當前行內的位置”，那么后者中，我們怎么判斷這個位置呢
我動手實驗了一下，4個塊，把塊1塊2塊3都定為float:left，塊4定為inline-block，塊4確實出現在塊3正下方，和float結果是一樣的。但是還是上面那個問題，怎么判斷改為inline元素后它的位置呢
uj5u.com熱心網友回復：
自己想了一下，得出個規律，雖然沒有依據，但大概猜測float放置新元素位置的道理應該就是 當我們往一個新的div塊里加入一個新元素時，先把新元素往最后一個元素的右邊，如果寬度越界，就放在最后一個元素的下面，然后往左靠，如果寬度還是越界，再放到使它越界的元素的下面，直到寬度不越界為止
uj5u.com熱心網友回復：
改為inline元素就是依據檔案流的流向定位了。你把第5塊換成一段文本，
當一行不夠顯示時文本就會顯示到下一行，塊3塊4右邊只夠顯示4行，第5行自然就在塊4的下方顯示了啊。
因為float的原本設計就是為了文本繞排，不可能違反檔案流的規則，讓第5行文本往上面去。
現在你把文本換成inline元素，依然是同樣的規則，塊3塊4右邊不夠顯示，就在塊4的下方顯示。
uj5u.com熱心網友回復：
感謝前輩指點！！！學到了！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/68802.html
標籤：HTML(CSS)