當你想要做成這種布局效果的時候

?

紫色框里面的內(nèi)容那樣

它是一個列表

li元素是塊級元素? 默認大小是父元素ul的寬 并且換行

如果li沒有背景的話那就不用管了

可是問題來了它不但有背景 而且是根據(jù)文字自適應(yīng)的寬高

這就是inline-block類型的功能了

那么想讓li是inline-block 設(shè)置float? 隱形改變

可是浮動的話 就不會換行了呀

問題又來了

沒事滴? 給li folat:left? 然后在clear:both 清除浮動不就好了

?

?

?

清除浮動一共四個屬性

clear:both|left|right|none;

我都測試了一下

首先box1 設(shè)置右clear:right 來達到不在同一行的目的

嗯 難道博主翻車了嗎? 怎么沒有達到理想的效果呢？？

那么我們把第二個元素box2設(shè)置clear:left; 看看結(jié)果

?

嗯 box1 box2 不在同一行了 實現(xiàn)了目的?

那為什么box1設(shè)置clear:right 不好使呢

因為呢box1 只能通過改變自己的位置來讓自己右邊沒有浮動的元素

就像生活中 你改變不了別人 但是你可以改變自己

但是 box1就算改變了自己位置 box2 還會緊跟著box1的 因為浮動元素都是脫離文檔流的

并且脫離文檔流的理應(yīng)去找脫離文檔流的元素? 因為元素變成了特殊的inline-block類型

有寬高 并且不換行? ?inline 和 block 特征合體? 很牛逼

這里box1? 就算清除右浮動? box2還是會跟著它 最終結(jié)果 box1 box2 box3 還是在一行

ps 可能你會想 那box1 跑到下一行? 讓box2 box3 不動就好了 那不行的? 清除浮動? 不是float:none 都是浮動 并且 在html

中box1? box2 box3 是依次創(chuàng)建的? 憑什么你在我前面? 你以為你是定位呢呢？？瞎TM跑

?

但是box2清除左浮動? 通過改變自身位置 換行

順序還是不變的 box1? box2? box 3??

box3跟著box2? 驗證了前面說的

通過這次理解 對浮動又有了一個深刻的認知

?

?

所以你把需要換行的元素 都設(shè)置成clear:both

一點問題都沒有了

左邊不行 右邊? ? 右邊也不行? 那就靠下一個元素

對吧

?

本文轉(zhuǎn)載于:猿2048?https://www.mk2048.com/blog/blog.php?id=icack2j&title=如何讓浮動的元素換行？？css

總結(jié)

以上是生活随笔為你收集整理的如何让浮动的元素换行？？css的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。