聽

CSS鐨凢loat涔嬩簩鍘熸枃

聽

璇磋捣娴姩澶у骞朵笉闄岀敓,鍥犱负鏈?Word 涓湅鍒板お澶氱殑娴姩鍥寸粫鐜拌薄銆傛垜浠彲浠ョ湅涓€涓嬪嵃鍒疯璁℃潵浜嗚В瀹冪殑璧锋簮鍜屼綔鐢ㄣ€傚嵃鍒峰竷灞€涓?鏂囨湰鍙互鎸夌収闇€瑕佸洿缁曞浘鐗囥€備竴鑸妸杩欑鏂瑰紡绉颁负鈥滄枃鏈幆缁曗€?br>
聽

澶у閮戒簡瑙ｅ埌, CSS 缃戦〉甯冨眬鐨勫師鐞?灏辨槸鎸夌収(X)HTML 浠ｇ爜涓璞″０鏄庣殑椤哄簭,浠ユ祦甯冨眬鐨勬柟寮?鏉ユ樉绀哄畠,鑰屾祦甯冨眬灏变笉寰椾笉璇村埌 float 娴姩鎶€鏈?鍦?X)HTML 涓殑鎵€鏈夊 璞?榛樿鍒嗕负涓ょ:鍧楀厓 绱?block element)銆佸唴鑱斿厓绱?inline element),铏界劧涔熷瓨鍦ㄧ潃鍙彉鍏冪礌,浣嗗彧鏄殢涓婁笅鏂囧叧绯荤‘瀹氳鍏?绱犳槸鍧楀厓绱犳垨鑰呭唴鑱斿厓绱犮€傚叾瀹?CSS 鐨?float 灞炴€?浣滅敤灏辨槸鏀瑰彉鍧楀厓绱?block element)瀵硅薄鐨勯粯璁ゆ樉 绀烘柟寮忋€傚湪缃戦〉璁捐涓?搴旂敤浜?CSS 鐨?float 灞炴€х殑椤甸潰鍏冪礌灏卞儚鍦ㄥ嵃鍒峰竷灞€閲岄潰鐨勮鏂囧瓧鍖呭洿鐨勫浘 鐗囦竴鏍枫€傛诞鍔ㄧ殑鍏冪礌浠嶇劧鏄綉椤垫祦鐨勪竴閮ㄥ垎銆傝繖涓庝娇鐢ㄧ粷瀵瑰畾浣嶇殑椤甸潰鍏冪礌鐩告瘮鏄竴涓槑鏄剧殑涓嶅悓銆?缁濆瀹氫綅鐨勯〉闈㈠厓绱犺浠庣綉椤垫祦閲岄潰绉婚櫎浜?灏卞儚鍗板埛甯冨眬閲岄潰鐨勬枃鏈琚缃负鏃犺椤甸潰鐜粫涓€鏍枫€?缁濆瀹氫綅鐨勫厓绱犱笉浼氬奖鍝嶅叾瀹冨厓绱?鍏跺畠鍏冪礌涔熶笉浼氬奖鍝嶅畠,鏃犺瀹冩槸鍚﹀拰鍏跺畠鍏冪礌鎸ㄧ潃銆?/p>

涓嬮潰鎴戜滑浠庝笉鍚岀殑鏂归潰鏉ヤ簡瑙ｈ繖涓猣loat锛?/p>

娴姩鐨勬湰璐?/h4>

娴?鍔ㄥ氨鏄釜甯︽湁鏂逛綅鐨?display:inline-block 灞炴€с€俤isplay:inline-block 鏌愮鎰忎箟涓婄殑浣滅敤灏辨槸鍖呰９ (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绛夌幇浠ｆ祻瑙堝櫒涓?鈥滄诞鍔ㄥ潡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 灞炴€х殑鍥剧墖,閭ｆ槸鍥犱负娴姩 鐮村潖浜嗘甯哥殑 line boxes 銆傚洜姝よ繖閲屽氨娑夊強鍒?line boxes 鐨勬蹇?閭ｄ箞鎴戜滑灏遍『渚胯涓€涓?line boxes 姒?蹇?濡備笅闈竴娈?HTML 鏍囪:

     <p>鎴戞槸涓€琛屾櫘閫氱殑鏂囨湰锛屾垜杩欓噷闈㈠惈鏈変竴涓?lt;span>锛筹及锛★籍</sp