[問題] 請問這個CSS排版哪裡錯了??

[MAXQb ()]

想請問各位~

目前我的CSS排版預覽如下圖

https://i.imgur.com/jIGg5ws.png

其中A、B、C、D、F區塊皆沒問題
(有試過把E區塊的內容及CSS拿掉，A、B、C、D、F區塊皆沒變動位置)

但唯獨E區塊都沒辦法排在D和F區塊的中間
有試過調D、E、F間的大小、距離等等，但還是一樣
E區塊硬是跑到B區塊的上面，而E區塊的內容又在D區塊的下面

請問，這E區塊是少了什麼設定嗎? 該如何設定正確呢??

附上B~F的CSS碼

https://i.imgur.com/7jwWgHr.png

感謝。

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.243.6.25 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1583601578.A.8A6.html
推 vavamos: E區塊怎沒float
請問E區塊也需要float嗎?
不是D、F區塊分別float左、右後，E區塊就會在中間嗎?
→ itisjoe: 請善用線上工具 https://jsfiddle.net
→ Rinorune: 大概是因為bc也是float吧 ... 實務上應該是不會這樣寫
請問，那我該怎麼改才能把版面弄好呢?
→ flowwinds: bcdf float移出了normal flow，故normal flow從E繼續?
→ sonia1127: clearfix
→ sanyaoooo: 用flex？
→ Kenqr: 都2020了 建議用flex排版
推 ai791016: 全加 float 或 全不要
→ Rinorune: 把同一row的元素包起來 裡面float inline-block flex隨
→ Rinorune: 便
→ Rinorune: 可以去觀察模仿市面上各大網站怎麼排的
了解，原來還有其他更好用的語法
感謝說明，我會去試試!!
※ 編輯: MAXQb (111.243.7.137 臺灣), 03/11/2020 23:27:12
推 angty8520: 下面兩個再包起來  就可以了啊