聽
CSS鐨凢loat涔嬩簩鍘熸枃
聽
璇磋捣娴姩澶у骞朵笉闄岀敓,鍥犱负鏈?Word 涓湅鍒板お澶氱殑娴姩鍥寸粫鐜拌薄銆傛垜浠彲浠ョ湅涓€涓嬪嵃鍒疯璁℃潵浜嗚В瀹冪殑璧锋簮鍜屼綔鐢ㄣ€傚嵃鍒峰竷灞€涓?鏂囨湰鍙互鎸夌収闇€瑕佸洿缁曞浘鐗囥€備竴鑸妸杩欑鏂瑰紡绉颁负鈥滄枃鏈幆缁曗€?br>
聽
澶у閮戒簡瑙e埌, CSS 缃戦〉甯冨眬鐨勫師鐞?灏辨槸鎸夌収(X)HTML 浠g爜涓璞″0鏄庣殑椤哄簭,浠ユ祦甯冨眬鐨勬柟寮?鏉ユ樉绀哄畠,鑰屾祦甯冨眬灏变笉寰椾笉璇村埌 float 娴姩鎶€鏈?鍦?X)HTML 涓殑鎵€鏈夊 璞?榛樿鍒嗕负涓ょ:鍧楀厓 绱?block element)銆佸唴鑱斿厓绱?inline element),铏界劧涔熷瓨鍦ㄧ潃鍙彉鍏冪礌,浣嗗彧鏄殢涓婁笅鏂囧叧绯荤‘瀹氳鍏?绱犳槸鍧楀厓绱犳垨鑰呭唴鑱斿厓绱犮€傚叾瀹?CSS 鐨?float 灞炴€?浣滅敤灏辨槸鏀瑰彉鍧楀厓绱?block element)瀵硅薄鐨勯粯璁ゆ樉 绀烘柟寮忋€傚湪缃戦〉璁捐涓?搴旂敤浜?CSS 鐨?float 灞炴€х殑椤甸潰鍏冪礌灏卞儚鍦ㄥ嵃鍒峰竷灞€閲岄潰鐨勮鏂囧瓧鍖呭洿鐨勫浘 鐗囦竴鏍枫€傛诞鍔ㄧ殑鍏冪礌浠嶇劧鏄綉椤垫祦鐨勪竴閮ㄥ垎銆傝繖涓庝娇鐢ㄧ粷瀵瑰畾浣嶇殑椤甸潰鍏冪礌鐩告瘮鏄竴涓槑鏄剧殑涓嶅悓銆?缁濆瀹氫綅鐨勯〉闈㈠厓绱犺浠庣綉椤垫祦閲岄潰绉婚櫎浜?灏卞儚鍗板埛甯冨眬閲岄潰鐨勬枃鏈琚缃负鏃犺椤甸潰鐜粫涓€鏍枫€?缁濆瀹氫綅鐨勫厓绱犱笉浼氬奖鍝嶅叾瀹冨厓绱?鍏跺畠鍏冪礌涔熶笉浼氬奖鍝嶅畠,鏃犺瀹冩槸鍚﹀拰鍏跺畠鍏冪礌鎸ㄧ潃銆?/p>
涓嬮潰鎴戜滑浠庝笉鍚岀殑鏂归潰鏉ヤ簡瑙h繖涓猣loat锛?/p>
娴姩鐨勬湰璐?/h4>
娴?鍔ㄥ氨鏄釜甯︽湁鏂逛綅鐨?display:inline-block 灞炴€с€俤isplay:inline-block 鏌愮鎰忎箟涓婄殑浣滅敤灏辨槸鍖呰9 (wrap),鑰屾诞鍔ㄤ篃鏈夌被浼肩殑鏁堟灉銆傜劧鑰?float 鏃犳硶绛夊悓浜?display:inline-block,鍏朵腑鍘熷洜涔嬩竴灏辨槸娴姩 鐨勬柟鍚?鎬?display:inline-block 浠呬粎涓€涓按骞虫帓鍒楁柟鍚?灏辨槸浠庡乏寰€鍙?鑰?float 鍙互浠庡彸寰€宸︽帓鍒? 杩欏氨鏄袱鑰呯殑宸紓銆?/p>
娴姩鐨勫睘鎬у弬鏁帮細
娴姩鎷ユ湁涓変釜鍙傛暟:none:瀵硅薄涓嶆诞鍔?left:瀵硅薄娴姩鍒板乏杈?right:瀵硅薄娴姩鍒板彸杈广€備笅闈㈡垜浠妇渚嬫潵璇存槑杩欏嚑绉嶆儏鍐?
<div id="floatA">娴姩鍧楋肌</div> <div id="floatB">娴姩鍧楋饥</div>
聽
div { width: 200px; height: 50px; color: #fff; padding: 5px; margin: 5px; } #floatA { border: 1px solid red; background: orange; } #floatB { border: 1px dotted blue; background: teal; }
聽鍦ㄨ繕娌℃湁搴旂敤娴姩涔嬪墠鐨勬晥鏋?
聽
聽涓嬮潰鎴戜滑鏉ョ湅绗竴绉嶆儏鍐?灏辨槸鎴戜滑缁?floatA 搴旂敤娴姩 float:left;鍏剁粨鏋滄槸浠€涔堟牱:
#floatA { float:left; border: 1px solid red; background: orange; }
聽
聽
聽
鍦↖E6~IE7 娴忚鍣ㄤ腑,瀵?floatA 鍧楄繘琛屽乏娴姩鍚?鈥滄诞鍔ㄥ潡A鈥濆凡缁忓悜宸︽诞鍔?鑰屼笖鈥滄诞鍔ㄥ潡B鈥?绱ч殢鍏跺悗,浣嗘槸鍦↖E8 鍜孎F绛夌幇浠f祻瑙堝櫒涓?鈥滄诞鍔ㄥ潡B鈥濆湪姘村钩鏂瑰悜涓嶈浜?琚€滄诞鍔ㄥ潡A鈥濋伄鐩栦綇浜? 閫犳垚杩欑闂鏄洜涓烘病鏈夎繘琛屾诞鍔ㄦ竻闄ゃ€傝嚦浜庢竻闄ゆ诞鍔ㄧ浉鍏抽棶棰樺ぇ瀹跺彲浠ュ弬闃呫€?a title="css clear float" target="_blank" href="http://www.w3cplus.com/css/clear-float">Clear Float銆嬨€?/p>
鎺ヤ笅鏉ユ垜浠湪鏉ョ湅绗簩绉嶆竻鍐碉紝娴潡A鍜屾诞鍧桞閮借繘琛屽乏娴姩锛?/p>
#floatA { float:left; border: 1px solid red; background: orange; } #floatB { float:left; border: 1px dotted blue; background: teal; }
聽鎴戜滑鏉ョ湅鐪嬫晥鏋滐細
聽浠庢晥鏋滃浘涓彲浠ョ湅鍑?鐜板湪鍚勬祻瑙堝櫒涓嬬殑鏁堟灉鍩烘湰涓婅揪鍒颁竴鑷淬€傜幇鍦ㄦ垜浠弽杩囨潵璁剧疆,鍦?floatA 涓嶈 缃诞鍔?鑰屽湪#floatB 璁剧疆宸︽诞鍔?鍦ㄥ悇娴忚鍣ㄤ腑鍙堜細鏈変粈涔堟牱鐨勫彉鍖?
聽
#floatA { border: 1px solid red; background: orange; } #floatB { float:left; border: 1px dotted blue; background: teal; }
聽鎴戜滑鏉ョ湅鍚勬祻瑙堝櫒涓嬬殑鏁堟灉锛?br>
聽
聽
鏁堟灉涓槑鏄惧憡璇夋垜浠紝娌℃湁浠讳綍鍙樺寲銆備笂闈㈡垜浠墍鐨勬槸宸︽诞鍔ㄧ殑鍑犵鎯呭舰锛岄偅涔堟垜浠繕鏈夊彸娴姩锛岃繕鏈変竴涓乏娴竴涓彸娴紝鍏跺疄杩欎簺鎬ц川閮藉樊涓嶅锛屽ぇ瀹跺彲浠ュ垱寤哄嚑涓猟iv锛岀劧鍚庡浠栦滑杩涜涓嶅悓鐨勬诞鍔ㄦ祴璇曘€傝繖鏍蜂綘灏变細涓€涓嬪瓙鏄庣櫧娴姩鏂瑰悜鐨勪綔鐢ㄣ€?/p>
娴姩鐨勭牬鍧忔€?/h4>
娴?鍔ㄥ彲浠ヨ鏄墍鏈?CSS 灞炴€т腑鐨勨€滅牬鍧忎箣鐜嬧€濄€傝鐞嗚В娴姩鐨勭牬鍧忔€?鎴戜滑瑕佷粠娴姩鏈€鍘熷鐨勬剰涔?鍏ユ墜銆傛诞鍔ㄧ殑鏈€鍒濇剰涔夊氨鏄枃鏈洿缁曞浘鐗囥€傛枃鏈负浠€涔堜細鍥寸粫鍚湁 float 灞炴€х殑鍥剧墖,閭f槸鍥犱负娴姩 鐮村潖浜嗘甯哥殑 line boxes 銆傚洜姝よ繖閲屽氨娑夊強鍒?line boxes 鐨勬蹇?閭d箞鎴戜滑灏遍『渚胯涓€涓?line boxes 姒?蹇?濡備笅闈竴娈?HTML 鏍囪:
<p>鎴戞槸涓€琛屾櫘閫氱殑鏂囨湰锛屾垜杩欓噷闈㈠惈鏈変竴涓?lt;span>锛筹及锛★籍</sp