如何讓浮動的元素換行？？css

Hydrogen 發布于2019-04-23 13:30 / 2826人閱讀

摘要：當你想要做成這種布局效果的時候紫色框里面的內容那樣它是一個列表元素是塊級元素默認大小是父元素的寬并且換行如果沒有背景的話那就不用管了可是問題來了它不但有背景而且是根據文字自適應的寬高這就是類型的功能了那么想讓是設置隱

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

紫色框里面的內容那樣

它是一個列表

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

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

可是問題來了它不但有背景而且是根據文字自適應的寬高

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

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

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

問題又來了

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

清除浮動一共四個屬性

clear:both|left|right|none;

我都測試了一下

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

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

那么我們把第二個元素box2設置clear:left; 看看結果

嗯 box1 box2 不在同一行了實現了目的?

那為什么box1設置clear:right 不好使呢

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

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

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

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

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

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

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

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

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

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

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

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

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

一點問題都沒有了

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

對吧

GPU云服務器云服務器 html讓圖片浮動元素浮動 html居中浮動元素浮動-前端-css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1967.html

元素auto寬高的影響因素

摘要：關于內聯元素之前討論的多是塊級元素，而沒有考慮到內聯元素的情況。但巧合的是，在普通流定位中，內聯元素寬度和高度規則卻和塊級元素絕對定位差不多，都只受內容大小影響。我們知道，元素在沒有設置寬高的情況下，默認的寬高值都為auto。而這個auto到底是如何讓元素自動擁有寬高的呢，也就是說，元素的寬度和高度到底會受到什么因素的影響？本文將通過一個例子來對這一問題一探究竟，HTML結構和初始c...

crelaber 2019-08-30 13:01 評論0 收藏0
CSS中重要的BFC

摘要：中有個重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實分為定位流浮動流普通流三種。使用包含浮動元素注意，這里觸發并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位...

plus2047 2019-08-29 14:20 評論0 收藏0
【芝士整理】CSS基礎圖譜

摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動產生，元素周圍的內容轉換為圍繞元素排列。選擇器注意點屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含選擇器組 A > B - 直接子節點 A + B - 下一個兄弟節點 A...

iOS122 2019-08-30 15:54 評論0 收藏0
HTML & CSS 之小白再續前緣

摘要：標準文檔流的常見現象空白折疊現象。浮動浮動的特點脫離標準文檔流，元素一旦脫離標準文檔流脫標，后面的元素會占據浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內元素的特性。元素浮動會脫離文檔流但是不會脫離文本流，所以會產生字圍效果。 CSS 盒子模型（點擊查看官方解釋）實際上網頁中的每一個標簽都可以看成一個盒子模型，而這個盒子模型從內到外有以下這幾個元素組成 conten...

Heier 2019-08-29 12:51 評論0 收藏0
HTML & CSS 之小白再續前緣

摘要：標準文檔流的常見現象空白折疊現象。浮動浮動的特點脫離標準文檔流，元素一旦脫離標準文檔流脫標，后面的元素會占據浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內元素的特性。元素浮動會脫離文檔流但是不會脫離文本流，所以會產生字圍效果。 CSS 盒子模型（點擊查看官方解釋）實際上網頁中的每一個標簽都可以看成一個盒子模型，而這個盒子模型從內到外有以下這幾個元素組成 conten...

taohonghui 2019-08-01 17:04 評論0 收藏0