多元素浮動時的排列問題？

01-14

如圖，三個元素都為浮動元素，當父元素（黃框）的寬度不足以在一行容納他們時，綠色元素按照藍元素的高度進行了排列，為什麼它不緊跟在紅色元素的下面？
如果要讓綠色元素緊跟在紅色元素下面該怎麼寫？？

HTML：
CSS：

謝邀！

首先這是CSS中浮動的最基礎的知識。在W3C規範中對浮動做了詳細的描述：CSS basic box model 如果你閱讀過這份文檔，你就很清楚知道你提出問題的原因是什麼？

針對你的示例簡單的說一下，首先你的容器不夠足夠的寬，所以綠色的被擠到下一行去了，同時藍色的高度將第一行撐高了，如此一來你看到的現象就類似你所說的了。

xLLpRW

這是通過margin來處理。但這種處理方式不是最佳的方式，如果你需要實現正常的布局，你需要考慮使用新的布局方式，比如Flexbox、Grid之類的。當然你堅持要使用浮動來布局的話，你需要調整HTML的結構來完成。

這樣說不知道是否明白其中的為什麼？要深入了解的話，建議你閱讀下面的文章:

CSS Page Floats
CSS basic box model
CSS Floats 101
CSS的Float之一_float 教程_w3cplus
CSS的Float之二_float 教程_w3cplus
float深入剖析_float 教程_w3cplus
float是如何工作的_CSS, float 教程_w3cplus

其他布局相關的可以閱讀：

Flexbox_入門精通教程_w3cplus
Grid_入門精通教程_w3cplus
CSS Shapes_入門精通教程_w3cplus

最近在整一個新的系列。學習CSS布局，一門旨在消除混亂的CSS布局教程！不過還沒有動筆，感興趣的話，可以關注相關更新：airen/css-layout

第一種方法：使用margin-top負值

第二種方法：使用postion:relative + top:-50px

這兩個方法有個明顯差別就是第一種的父元素黃框高度收縮包裹住了子元素，而第二種的父元素內部底下有50px的距離，因為元素設置postion:relative加位移後，原來的位置是不動的。

寬度不足容納就會換行，可以對父元素設置相對定位，對綠元素進行絕對定位實現，我也是初學者，共勉

有多種方法，①margin調整兩個盒子之間的距離 margin-top:-50px②position:relative; 給個相對定位，相對原本的位置調整，正數在原來的位置增加像素，反之亦然，再來個top定位③position:absolute絕對定位，它很容易用但盡量少用，因為它跟著瀏覽器變化而變化，布局用它很尷尬

不止這三種，還有其他，多學多敲。

加油。