怎樣處理float後防止父元素崩潰

    通常爲了方便算盒子的位置設置通配符*{margin:0;padding:0;},爲了方便理解浮動舉例說明佈局

例:有3個盒子 div1,div2,div3,         div2,div3在div1裏面普通文檔流中盒子div2,div3撐開div1,高度是盒子2,3的內容高度,當div2,div3float  div1就脫離文檔流崩潰,如給div1設置了高度可是低於div2,div3內容高度 則內容溢出,可用overflow:hidden隱藏多餘內容,spa

辦法1:給父元素一個高度就不會崩潰;ip

辦法2:用clear:left/right/bouth清除浮動(浮動後的顯示效果不變 可是父元素不會崩潰此時父元素的高度就是清除該元素浮動的高度),這樣既不影響佈局也實現了浮動效果;文檔

辦法3:父元素一塊兒浮動;it

辦法4:給父元素加overflow:hidden。cli


此處順便說明overflow屬性的取值有 visible/hidden/scroll/autoscroll

visible:默認值,不裁剪內容,也不添加滾動條,強制顯示多餘內容;margin

hidden:裁剪內容,不顯示多餘內容,但也不添加滾動條;di

scroll:裁剪內容,同時添加滾動條;清除浮動

auto:自動處理內容跟滾動條。

【指定裁剪區域用clip:rect(xx px   xx px auto auto)】


通常爲了防止單獨達到清除效果而另外設置一個元素而影響佈局通常給該元素以下屬性:

xxx:after{contert:"." ; height:0 ; visibility:hidden; display:block;  clear:both;}

相關文章
相關標籤/搜索