標準文件流及浮動的元素和壞處

2022-08-09 08:39:08 字數 593 閱讀 3575

瀏覽器的排版是根據元素的特徵(塊和行級),從上往下,從左往右排版這就是標準文件流。

浮動:float:位置

元素都加浮動,後面的元素會緊跟前面的元素併排排列。,只要加了浮動,就不會受標準文件流的控制。浮動的元素不僅會緊緊貼靠在一起,還會文字環繞。

讓元素脫離標準流的方法:

1、浮動float

2、絕對定位position: absolute;

·       3、固定定位position: fixed

浮動是也是有壞處的,因為它給元素新增浮動之後,撐不起父級的高度。

清除浮動(清除它帶來的壞處)

1、給浮動的父元素新增高度

2、給父級新增overflow

3、給浮動元素的後面新增乙個空的div新增樣式為clear:both

4、給浮動元素的父級新增乙個類叫clearfix     格式:clearfix:after

display: block;

clear: both;

height:0;

visibility: hidden;

content: "  "

以上就是浮動的使用方法及壞處,希望對你有所幫助。

標準文件流及浮動的元素和壞處

瀏覽器的排版是根據元素的特徵 塊和行級 從上往下,從左往右排版這就是標準文件流。浮動 float 位置 元素都加浮動,後面的元素會緊跟前面的元素併排排列。只要加了浮動,就不會受標準文件流的控制。浮動的元素不僅會緊緊貼靠在一起,還會文字環繞。讓元素脫離標準流的方法 1 浮動float 2 絕對定位po...

標準文件流 浮動

定義 內容從左到右,從上到下書寫的。前面的內容大小或者位置發生變化時,後面的內容位置也會隨之變化。web頁面,就是乙個標準的文件流。內容跟咱們的書寫順序有關。1 空白摺疊現象 無論多少個空格,tab,換行都會摺疊為乙個空格。張老師 真帥 2 高矮不同,底部對齊 妖怪我要你助我修行 3 一行寫滿,自動...

浮動以及清除浮動問題 標準文件流

1.浮動 浮動能使盒子脫離標準文件流 四大特性 1,浮動的元素脫標 2.浮動的元素互相貼靠 3.浮動的元素有 字圍 效果 是文字圍繞著浮動盒子顯示 4.收縮的效果 將塊級元素轉化成行內 大家一定要謹記 關於浮動,我們初期一定要遵循乙個原則,永遠不是乙個盒子單獨浮動,要浮動就要一起浮動,另外有浮動一定...