沐鳴註冊網站_CSS浮動標準修復top塌陷和清除浮動及IE兼容標準格式

1、浮動的特性

1、浮動元素有左浮動(float:left)和右浮動(float:right)兩種
2、浮動的元素會向左或向右浮動,碰到父元素邊界、其他元素才停下來
3、相鄰浮動的塊元素可以並在一行,超出父級寬度就換行
4、浮動讓行內元素或塊元素自動轉化為行內塊元素(此時不會有行內塊元素間隙問題)
5、浮動元素後面沒有浮動的元素會佔據浮動元素的位置,沒有浮動的元素內的文字會避開浮動的元素,形成文字饒圖的效果
6、父元素如果沒有設置尺寸(一般是高度不設置),父元素內整體浮動的元素無法撐開父元素,父元素需要清除浮動
7、浮動元素之間沒有垂直margin的合併

2、浮動的缺點及坑

1、top塌陷
2、li子元素浮動屬性無法對ul的
3、IE對:after或者:befroe兼容

3、clearfix修復代碼標準格式


  
   
    /*top塌陷*/ .clearfix:after,.clearfix:before{ content: ""; display: table; } /*清除浮動*/ .clearfix:after{ clear: both; } /*IE兼容*/ .clearfix{ zoom: 1; }
   
  

__EOF__

本文作者:
胸毛君
本文鏈接:https://www.cnblogs.com/lzq70112/p/13130246.html

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9317