微信小程序 CSS 清除浮動 flexfix

不少同窗都在使用下面的骨灰級解決辦法:css

.clear{
    clear:both;
    height:0;
    overflow:hidden;
}

上訴辦法是在須要清除浮動的地方加個div.clear或者br.clear,咱們知道這樣能解決基本清浮動問題。html

可是這種方法的最大缺陷就是改變了html結構,雖然只是加個div。dom

 

最優浮動閉合方案(這是咱們推薦的):

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

用法很簡單,在浮動元素的父雲素上添加class=」demo clearfix」。測試

你會發現這個辦法也有個弊端,但的確是小問題。改變css寫法就ok了:spa

很拉轟的浮動閉合辦法:

.clearfix {
  overflow: auto;
  _height: 1%;
}

這種辦法是我看國外的一篇文章獲得的方案,測試了,百試不爽,真的很簡單,很給力。喜歡的同窗也能夠試試這個辦法。code

這種方法是端友radom提供的,測試經過:htm

.clearfix{overflow:hidden;_zoom:1;}

以上爲轉載  我用的是拉轟的浮動閉合  直接解決浮動不佔位的問題。blog

相關文章
相關標籤/搜索