前端元素清浮動

2021-10-07 07:37:33 字數 826 閱讀 9266

什麼是浮動

給元素設定float樣式使元素脫離文件普通流,漂浮在普通流之上

浮動對文件的影響

子元素浮動,父級元素會出現高度為0的現象,這個現象,叫做高度塌陷(導致這現象是因為子元素浮動脫離文件層,父級元素還在文件層)

清浮動:4種方法:

1. 子元素浮動,父級元素跟著浮動

優點:不存在結構和語義化問題,**量少。

2.給空標籤設定clear:both;

優點:通俗易懂,容易掌握。

缺點:會新增大量無語義空標籤,結構與表現未分離,不利於維護。

3.給父級標籤設定overflow:hidden

優點:不存在結構和語義化問題,**量少。

缺點:內容增多時候容易造成不會自動換行,導致內容被隱藏,無法顯示需要溢位的元素。

ie6需要觸發haslayout。

overflow:auto;

優點:不存在結構和語義化問題,**量少。

缺點:多個巢狀後,ff某些情況會造成內容全選;ie中mouseover造成寬度改變時會出現最外層模組出現滾動條。

ie6需要觸發haslayout。

4.after 偽元素清浮動(新建個類,寫入**,在父標籤出新增類名)

優點:結構和語義化完全正確,**量居中。

缺點:復用方式不當會造成**量增加。

優點:比空標籤方式語義稍強,**量較少。

Python 浮動 清浮動

浮動布局 一.display總結 css inline 1.同行顯示,就相當於純文字,當一行顯示不下,如就是乙個字顯示不下,那麼顯示不下的那乙個字就會自動換行,和純文字的區別就是有標籤整體的概念,標籤與標籤間有乙個空格的隔斷 2.支援部分css樣式,不支援寬高 行高 行高會對映到父級block標籤 ...

清浮動方法

1.加高 問題 擴充套件性不好 2.父級浮動 問題 頁面中所有元素都加浮動,margin左右自動失效 floats bad 3.inline block 清浮動方法 問題 margin左右自動失效 4.空標籤清浮動 問題 ie6 最小高度 19px 解決後ie6下還有2px偏差 5.br清浮動 問題...

高階布局 浮動 清浮動

文件流 normal flow bfc block fromatting context 塊級格式化上下文,它是乙個獨立的渲染區域,只有block level box參與,它規定了內部的block level box如何布局,並且與這個區域外部毫不相干.bfc規則 1.內部的box會在垂直方向,乙個...