來自張鑫旭大大的《css世界》學習筆記--- about float
阿新 • • 發佈:2018-08-16
有效 fun list 高度 inline 自動 ali scrolltop 之一
6.1 float的本質與特性
浮動的本質是為了實現文字環繞效果
float特性:
- 包裹性(eg:父元素寬200px,子元素為寬128px的圖片,此時表現出包裹;子元素寬超過200px,則自適應父元素寬度,最終為200px)(包裹自適應兩部分組成)
- 塊狀化並格式化上下文(塊狀化:一旦float屬性值不為none,其display計算值為block或者table)
- 破壞文檔流
沒有任何margin合並
tips:不要用text-align屬性控制浮動元素的左右對齊,對塊級元素是無效的。
float浮動機制:float屬性的作用之一就是使父元素高度坍塌(這不是bug)。行框盒子和浮動元素不可重疊(行框盒子如果和浮動元素的垂直高度有重疊,則行框盒子在正常定位狀態下只會跟隨浮動元素,不會發生重疊)可以看個有趣例子
6.2 float與流體布局
借助float特性,可以實現兩欄或多欄自適應布局
一側定寬的兩欄自適應布局:
eg:.father{
overflow:hidden;
}
.father > img{
width:60px;
height:64px;
float:left;
}
.animal{
margin-left:70px;
}如果寬度不固定,用百分比寬度也ok
中間居中的左中右布局:
eg:<div class="box"> <a href="#" class="prev">上一章</a> <a href="#" class="next">下一章</a> <h3 class="title">瘋狂動物城</h3> </div> .prev{float:left;} .next{float:right;} .title{margin:0 70px;text-align:center;}
6.3 clear屬性
元素盒子的邊不能和前面的浮動元素相鄰
tips:凡是用clear:left或clear:right的地方均可以用clear:both替換(clear對"後面的"浮動元素是不聞不問的)
clear屬性只有塊級元素才有效,因此在使用::after清除浮動時要設置display
.clear{ content=""; display:table(也可以是block/list-item); clear:both; }
6.4 BFC
block formatting context 塊級格式化上下文
內部子元素不會影響到外部的元素
觸發BFC的情況:
- 根元素
- float的值不為none
- overflow的值為auto,scroll,hidden
- display的值為table-cell、table-caption、inline-block中的任意一個
position的值不為relative和static
元素符合上面任意一個條件,無需使用clear:both清除浮動
普通流體元素在設置了overflow:hidden後,會自動填滿容器中除浮動元素以外的剩余空間,形成自適應布局效果
與基於純流體特性實現的兩欄或多欄布局相比,基於BFC布局的優點:1)自適應內容由於封閉而更健壯,容錯性更強 2)自適應內容自動填滿浮動以外區域,無需關心浮動元素寬度
能擔任自適應布局重任的:
- overflow:auto/hidden,適用IE7以上版本
- display:inline-block,適用於IE6和IE7
display:table-cell,適用於IE8及以上版本
6.5 overflow與錨點定位
實現錨點跳轉方法:1)a標簽以及name屬性 2)利用標簽的id屬性
錨點定位的觸發條件:1)URL地址中的錨鏈與錨點元素對應並有交互行為 2)可focus的錨點元素處於focus狀態
錨點定位的本質是改變了scrollTop或scrollLeft的值
使用錨點定位來實現選項卡切換效果 戳這裏 不足之處:1)容器高度需要固定 2)"由內而外"的錨點定位會觸發窗體的重定位,若頁面也是可以滾動的,則點擊按鈕後頁面會發生跳動
使用"focus"錨點定位 戳這裏 通過for屬性與input輸入框的id相關聯,點擊按鈕觸發輸入框的focus行為,觸發錨點定位。 實際項目裏還需用到JS,處理列表部分區域在瀏覽器外面時依然跳動的問題
$("label.click").removeAttr("for").on("click",function(){ $(".box").scrollTop(xxx); )};
來自張鑫旭大大的《css世界》學習筆記--- about float