【學習筆記】CSS深入理解之float

denson 發布于2019-08-29 17:31 / 1475人閱讀

摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動，元素周圍的內容轉換為圍繞元素排列。從浮動的起因和浮動的實現后果來看，浮動不適合用于大范圍的布局，更適合利用其特性實現一些小范圍的流體布局效果。

張鑫旭的CSS深入理解之float浮動學習筆記

float的歷史

float為產生文字環繞效果而生

float的特性 — 包裹和破壞

包裹：即產生一個BFC
破壞：使父容器塌陷，元素脫離文檔流，產生inline boxes環繞

清除浮動

方式一：使用clear，類似于產生一個連接索道，使前文和后文關聯，會產生margin重疊效果。

clear: both，這個元素和源碼中后面的元素將不浮動

非浮動元素和浮動元素之間不能通過外邊距撐開距離

因此需要一個多帶帶的非浮動元素充當索道

方式二：父容器BFC或者haslayout(IE6/IE7) - 封閉容器，不會產生margin重疊

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /*IE6, IE7產生haslayout*/
}

float的表現

元素block化：inline元素被block化
去空格化，空格符成為環繞文本

浮動與流體布局應用

文字環繞效果
https://codepen.io/curlywater...

左中右效果
https://codepen.io/curlywater...

單側固定
https://codepen.io/curlywater...

DOM與顯示位置匹配的單側固定
https://codepen.io/curlywater...
第一種實現方式，保證向右浮動的元素寫在前（先布局），內容區設置margin-right
第二種實現方式，為了使DOM和現實順序一致，對內容區加一個向左浮動的盒子，沒有指定寬度的盒子利用外邊距保留剩余空間，實現寬度拉伸。使用負margin把左浮動的頭像區移動到同行。

兩側自適應
https://codepen.io/curlywater...
使用table-cell產生一個BFC，去除掉浮動的影響

總結

浮動起源于實現文字環繞效果。

為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動，元素周圍的內容轉換為inline boxes圍繞元素排列。

從浮動的起因和浮動的實現后果來看，浮動不適合用于大范圍的布局，更適合利用其特性實現一些小范圍的流體布局效果。

GPU云服務器云服務器深入理解webrtc之aec 如何深入理解深度學習深入理解系列深入理解linux

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

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

【學習筆記】CSS深入理解之absolute

摘要：張鑫旭的深入理解之學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。利用絕對定位元素脫離文檔流的特性，使用動畫可以避免大范圍的回流和重繪。絕對定位元素拉伸實現寬高自適應，可應用于大范圍的布局。《張鑫旭的CSS深入理解之absolute》學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。浮動的一些應用場景中也可用絕對定位替代絕對定位的行為表現無依賴絕對...

Anleb 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之z-index

摘要：張鑫旭的深入理解之學習筆記層疊上下文什么是層疊上下文在軸上延伸出一個層級，離父級層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。張鑫旭的CSS深入理解之z-index學習筆記層疊上下文什么是層疊上下文？在z軸上延伸出一個層級，離父級層疊上下文的頂部更近。如何產生層疊上下文？根元素具有根層疊上下文 z-index不為auto的定位元素一個 z-index 值不為 ...

Steven 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之vertical-align

摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設置為，即這個的高度為，位置處于中間。 vertical-align的值線類：baseline（默認）, top, bottom, middle 文字類：text-top, text-bottom 上標下標類：sub, super 數值：1px, 1em - 在baseline對齊的基礎上上下偏移一定數值百分...

ermaoL 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之margin

摘要：張鑫旭的深入理解之學習筆記與容器的尺寸可視尺寸對于沒有設定的塊元素，可改變元素水平方向的可視尺寸占據尺寸對于元素，可改變元素水平垂直方向的占據尺寸與百分比單位普通元素的百分比都是相對于容器的寬度計算的絕對定位元素的百分比是相對于包含塊的寬張鑫旭的CSS深入理解之margin學習筆記 margin與容器的尺寸可視尺寸：對于沒有設定width的塊元素，margin可改變元素水平方向...

stefan 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之padding

摘要：張鑫旭的深入理解之學習筆記與容器的尺寸元素值過大，一定影響元素尺寸為定值，會影響元素尺寸為或者為，同時值沒有暴走，不影響元素尺寸元素水平影響尺寸，垂直不影響尺寸，但是會影響占據空間會顯示背景色負值與百分比單位不支持負值百分比相對于自身寬張鑫旭的CSS深入理解之padding學習筆記 padding與容器的尺寸 block元素 padding值過大，一定影響元素尺寸 width為定...

learn_shifeng 2019-08-30 15:54 評論0 收藏0