浮動原理及清浮動筆記

2021-08-08 10:07:54 字數 1465 閱讀 1177

一句話解釋:元素浮動後,會脫離文件流,接著會按照指定的方向移動,一直到碰到父級的邊界或另外乙個元素為止。浮動的**:folat: left/right/none,none 表示為不浮動,完全沒有浮動的效果。

使塊元素在一行顯示;

使內嵌支援寬高;

不設定寬度時,寬度由內容撐開;

脫離文件流(文件流是文件中可顯示物件在排列時所占用的位置);

提公升半層層級(元素本身有上下兩個半層,下半層為元素本身的屬性,比如為元素的邊框,背景等;上半層為元素的內容,比如為元素的文字與等)。

clear: left/right/both/none表示的是元素的某個方向不能有浮動元素( both 是元素兩邊都不能有浮動元素)。

給父級加高度(存在頁面中所有元素都要加高度,麻煩!)

給父級也加浮動(存在1.頁面中所有元素都要加浮動,麻煩! 2. margin 左右自動失效的問題);

給父級加display:inline-block(存在 margin 左右自動失效的問題);

在浮動元素下加

,並在樣式表中加.clear(存在 ie6 下的最小高度問題):

ie6 下的最小高度問題:在 ie6 下高度小於 19px 的元素,高度會被當做 19px 來處理;

ie6 下的最小高度問題的解決辦法:在樣式中加入font-size: 0;,但font-size: 0;最小只能處理 2px 的高度。

在浮動元素下加

(但是不符合 w3c 原則中的結構、樣式、行為,三者分離的要求);

給浮動元素的父級加 overflow ,一定要配合zoom: 1;(但是 ie6 下不具有包著浮動元素的功能,即沒有把元素提公升層級的功能,以及 overflow 不支援建立某個元素的子選單);

overflow 表示的是當內容溢位時的樣式,overflow:auto;表示的是溢位時顯示滾動條;soroll 表示預設顯示滾動條;hidden 表示溢位時將內容隱藏。

.clear

.clear

:after

在 ie6,7 下浮動元素的父級有寬度就不用清浮動;

在 ie6,7 下不支援 after 偽類;

haslayout:根據元素內容的大小或者父級的大小來重新計算元素的寬高。以下情況會激發 haslayout :

display: inline-block;height: (任何值除了 auto );float: (left 或 right);width: (任何值除了 auto );zoom: (除 normal 外任意值);

清浮動原理及方式

浮動清理的必要性 當父盒子不浮動,子盒子浮動,子盒子會脫離父盒子的束縛,也就是造成父盒子塌陷,子盒子不浮動時 子盒子如圖 子元素浮動後,父元素預設為0,即 cd如圖 解決方式有這麼幾個 方法1,父盒子定義height,適用于父盒子固定,原理 這樣父盒子自己設定高度,就不用子盒子撐開了,適用於父級元素...

css浮動筆記

浮動的特點 1 浮動只有左浮動和右浮動 2 浮動的元素會向右或者向左移動直到碰到父元素邊際或者上乙個浮動元素的邊際為止 3 浮動的元素會脫離文件流,不在佔據物理空間,後面不浮動的元素會佔據浮動元素的位置,不浮動元素的文字將避開浮動的元素形成文字環繞 4 相鄰的浮動的元素可以並成一行,超過父級元素的寬...

浮動及清浮動的方式

浮動的特點 1.使塊元素在同一行顯示 2.使內嵌支援寬高 3.不設寬高則由內容撐開 4.脫離文件流,按照指定的乙個方向去移動,直到碰到父級的邊界或者另外乙個浮動元素停止 5.提公升層級半層,元素可以分為上下兩層,下層是具有樣式的元素本身,上層是元素裡的內容,浮動只浮動了半層。所以另乙個元素擠進來的時...