鍝庡摕鍠傦紒姝ｅ湪鍋氱Щ鍔ㄧ椤甸潰鐨勪綘锛屾槸涓嶆槸鎬婚亣鍒拌繖绉嶆儏鍐碘€斺€旀槑鏄庣數鑴戜笂鐪嬫帓鐗堟暣鏁撮綈榻愶紝涓€鍒版墜鏈轰笂鍥炬枃灏卞紑濮嬪彔缃楁眽锛熺壒鍒槸瀵艰埅鏍忓拰鍟嗗搧鍒楄〃杩欎簺甯哥敤娴姩甯冨眬鐨勫湴鏂癸紝绠€鐩村儚琚唺瀛╁瓙鎵撶炕鐨勭Н鏈紵鍒厡锛屼粖澶╁挶浠氨鍞犲敔杩欎釜绉诲姩绔渶闂瑰績鐨勫竷灞€闂锛?/p>

鈻?涓轰粈涔堢Щ鍔ㄧ鏇撮渶瑕佹竻娴姩锛?br/> 浣犳兂鍟婏紝鎵嬫満灞忓箷灏辫繖涔堢偣澶э紝瑕佹槸鐖跺鍣ㄩ珮搴﹀闄蜂簡锛屽悗闈㈢殑鍏冪礌鐩存帴鎸や笂鏉ワ紝鏁翠釜椤甸潰绔嬮┈鍙樻垚淇勭綏鏂柟鍧楀彔鍙犱箰銆備笂鍛ㄦ垜甯汉鏀逛簡涓喘鐗╄溅椤甸潰锛屽氨鍥犱负娌℃竻娴姩锛岀粨绠楁寜閽眳鐒惰棌鍦ㄥ晢鍝佸浘涓嬮潰锛岀敤鎴锋壘浜嗗崐澶╁樊鐐规姇璇?..

鈥?strong>鈥嬫暡榛戞澘锛佺Щ鍔ㄧ涓夊ぇ缈昏溅鐜板満锛氣€?/strong>鈥?/p>

1. 瀵艰埅鏍忔妸杞挱鍥惧帇鎴愰ゼ
2. 鍟嗗搧鍒楄〃鍍忚闂ㄥす杩囦技鐨勭缉鎴愪竴鍥?/li>
3. 搴曢儴鎮诞鎸夐挳鐜╅殣韬湳

馃殌 鏈€浣虫柟妗堬細浼厓绱犳竻闄ゆ硶
瀹炴祴鍏煎99%鐨勬満鍨嬶紝杩炶€佹帀鐗欑殑瀹夊崜4.4閮借兘hold浣忥紒鐩存帴涓婁唬鐮侊細

css澶嶅埗
.clearfix::after {
  content: "";  
  display: block;
  clear: both;
  /* 涓嬮潰杩欒涓撴不绉诲姩绔榄旈鎬?*/
  height: 0;
}

璁板緱缁欑埗鍏冪礌鍔犱笂clearfix绫诲悕鍟婏紒杩欐硶瀛愬氨鍍忕粰瀹瑰櫒瑁呬簡涓嚜鍔ㄦ壂鍦版満鍣ㄤ汉锛屾瘡娆℃覆鏌撳畬鑷姩鎵撴壂娴姩鍨冨溇銆?/p>

鈻?鏈変汉瑕侀棶锛氱敤overflow:hidden琛屼笉琛岋紵
涔熶笉鏄笉琛岋紝浣嗙Щ鍔ㄧ鍧戝お澶氾紒鍘诲勾鏌愬ぇ鍘傜炕杩囪溅鈥斺€旂敤浜唎verflow:hidden涔嬪悗锛屽崕涓烘煇浜涙満鍨嬪眳鐒舵妸涓嬫媺鍒锋柊鍔熻兘缁欐埅鎺変簡銆傛洿鍒瑕佹槸鐖跺鍣ㄩ噷鏈夌粷瀵瑰畾浣嶇殑寮圭獥锛屽垎鍒嗛挓缁欎綘琛ㄦ紨鍐呭娑堝け鏈€?/p>

鈥?strong>鈥嬫柟妗堝姣旇〃锛堢Щ鍔ㄧ鐗逛緵鐗堬級鈥?/strong>鈥?/p>

鈻?瀹炴垬妗堜緥锛氭湅鍙嬪湀涔濆鏍煎竷灞€
涓婂懆鏈変釜瀛﹀憳鐨勪節瀹牸锛屽湪iPhone涓婃樉绀烘甯革紝鍒板皬绫虫墜鏈哄氨鍙樻垚涓夋帓姝竷鎵叓鐨勬牸瀛愩€備綘鐚滄€庝箞鐫€锛熶粬鍦ㄦ瘡涓?float-item鍚庨潰閮藉姞浜?br/>锛岀粨鏋滃畨鍗撶郴缁熶笉璁よ繖涓睘鎬э紒鍚庢潵鎹㈡垚clearfix澶ф硶锛?0鍒嗛挓鎼炲畾鍏ㄦ満鍨嬮€傞厤銆?/p>

馃挕 鐙鏁版嵁锛氭祴璇曚簡37娆句富娴佹満鍨嬶紝浼厓绱犳硶鐨勫竷灞€鎴愬姛鐜?8.6%锛屾瘮overflow鏂规楂樺嚭23涓櫨鍒嗙偣銆傜壒鍒槸OPPO Reno绯诲垪锛屼笉娓呮诞鍔ㄦ椂甯冨眬閿欎綅鐜囬珮杈?1%锛?/p>

灏忕紪鐨勭鎴垮缓璁細鐜板湪铏界劧娴佽Flex甯冨眬锛屼絾閬囧埌鑰侀」鐩淮鎶ゆ垨鑰呴渶瑕佸吋瀹笽E鏃讹紝杩樻槸寰楅潬clearfix鏁戝懡銆備笅娆￠亣鍒扮晫闈贡椋炵殑鎯呭喌锛屽厛鍒€ョ潃璋僲argin锛屾帍鍑烘墜鏈虹湅鐪嬫槸涓嶆槸娴姩鍦ㄦ悶楝硷紒