銆怌SS銆戞湁鎰忔€濈殑BFC锛欱lock Formatting Context锛堝潡鏍煎紡鍖栦笂涓嬫枃锛夛紒鈾€鈸库檧鍓嶈█澶у濂斤紝鎴戞槸HoMeTown锛屼粖澶╂兂鑱婁竴鑱奀SS涓殑BFC锛屽緢澶氭湅鍙嬪簲璇ラ兘鍚繃杩欎釜鍚嶈瘝锛屾悶鎳侭FC鍙互璁╂垜浠悊瑙SS涓竴浜涘緢璇″紓鐨勫湴鏂癸紝璇濅笉澶氳锛岀洿濂斾富棰橈紒浠€涔堟槸BFCBFC鏄粈涔堬紵寮曠敤MDN鐨勪竴娈典粙缁嶏細鍧楁牸寮忓寲涓婁笅鏂囷紙Block Formatting Context锛孊FC锛?聽鏄?Web 椤甸潰鐨勫彲瑙?CSS 娓叉煋鐨勪竴閮ㄥ垎锛屾槸鍧楃骇鐩掑瓙鐨勫竷灞€杩囩▼鍙戠敓鐨勫尯鍩燂紝涔熸槸娴姩鍏冪礌涓庡叾浠栧厓绱犱氦浜掔殑鍖哄煙銆傚ぇ鐧借瘽璁诧紝鎴戠悊瑙FC鍏跺疄灏辨槸CSS涓殑鍧楃骇浣滅敤鍩燂紝鍖呭惈涓婁笅鏂囧厓绱犱腑鐨勬墍鏈夊瓙鍏冪礌锛屼絾涓嶅寘鎷唴鍒涘缓浜嗘柊鐨凚FC鐨勫瓙鍏冪礌鐨勫唴閮ㄥ厓绱狅紝涔熷氨鏄?A -> B -> C 浣嗘槸 A !-> C锛屾崲鍙ヨ瘽璁诧紝涓€涓厓绱犱笉鍙兘瀛樺湪浜庝袱涓狟FC涓紝鍥犱负濡傛灉涓€涓厓绱犲瓨鍦ㄤ簬涓や釜涓嶅悓鐨凚FC锛岄偅涔堣繖涓厓绱犲氨鑳藉拰杩欎袱涓狟FC涓殑瀛愬厓绱犲彂鐢熶綔鐢紝閭ｅ氨杩濇硶浜咮FC鐨勫垵琛凤細闅旂銆侭FC鐨勬覆鏌撹鍒橞FC涓湁鐗瑰畾鐨勬覆鏌撹鍒欙紝濡備笅锛氬悓涓€涓狟FC涓袱涓浉閭荤殑鍏冪礌鐨刴argin閲嶅彔闂BFC鍦ㄨ绠楅珮搴︽槸锛屽嵆浣挎诞鍔ㄧ殑鍏冪礌涔熶細鍙備笌楂樺害璁＄畻BFC鐨勫尯鍩熶笉浼氫笌float鐨勫厓绱犲尯鍩熼噸鍙犳瘡涓厓绱犵殑宸﹀杈硅窛涓庡寘鍚潡鐨勫乏杈圭晫鐩告帴瑙︼紝鍗充娇娴姩涔熷姝ゅ唴閮ㄧ殑鐩掑瓙浼氫竴鍦ㄥ瀭鐩存柟鍚戜笂涓€涓釜鏀剧疆BFC鐨勮Е鍙戞潯浠舵牴鍏冪礌锛圚TML鏍囩锛塮loatoverflow != visibledisplay = inline-block銆乼able-cell銆乼able-caption銆乼able銆乮nline-table銆乫lex銆乮nline-flex銆乬rid銆乮nline-gridpostion = fixed / absoluteBFC鐨勪綔鐢ㄩ槻姝㈢浉閭诲厓绱犵殑margin閲嶅彔涓婇潰鎻愬埌杩囷紝鍚屼竴涓狟FC鐨勪袱涓浉閭诲厓绱犵殑涓婁笅margin浼氬彂鐢熼噸鍙狅紝涓句釜馃尠锛?lt;style> p { width: 300px; height: 200px; margin: 100px; line-height: 200px; text-align: center; background-color: #f3eaff; color: #8857cd; font-weight: bold; }</style> </head> <body> <p>HoMeTown</p> <p>浣犲ソ鏈嬪弸</p> </body>椤甸潰鏄剧ず濡備笅锛氬悓涓€涓狟FC涓殑涓や釜鐩搁偦鍏冪礌鐨刴argin涓婁笅閲嶅彔锛屾鏃舵垜浠渶瑕佹墜鍔ㄥ垱寤烘柊鐨凚FC锛岃В鍐宠繖涓棶棰橈紝鏀瑰姩濡備笅锛?lt;style> p { width: 300px; height: 200px; margin: 100px; line-height: 200px; text-align: center; background-color: #f3eaff; color: #8857cd; font-weight: bold; } .wrapper { overflow: hidden; }</style> </head> <body> <p>HoMeTown</p> <div class="wrapper"> <p>浣犲ソ鏈嬪弸</p> </div> </body>椤甸潰灞曠ず濡備笅锛歮argin鎭㈠姝ｅ父BFC鍦ㄨ绠楅珮搴︽槸锛屽嵆浣挎诞鍔ㄧ殑鍏冪礌涔熶細鍙備笌楂樺害璁＄畻浼楁墍鍛ㄧ煡锛屽厓绱爁loat鑴辩鏂囨。娴佷箣鍚庯紝浼氫骇鐢熼珮搴﹀闄风殑闂锛岄櫎浜嗘竻闄ゆ诞鍔紝鎴戜滑杩樺彲浠ラ€氳繃BFC鐨勭壒鎬у幓澶勭悊锛屼妇涓煂帮細<style> p { width: 300px; height: 200px; line-height: 200px; text-align: center; background-color: #f3eaff; color: #8857cd; font-weight: bold; float: left; } .wrapper { width: 600px; border: 4px solid #cfc; }</style> </head> <body> <div class="wrapper"> <p>HoMeTown</p> <p>浣犲ソ鏈嬪弸</p> </div> </body>椤甸潰灞曠ず濡備笅锛氬洜涓哄瓙鍏冪礌娴姩鐨勫師鍥犲鑷寸洅瀛?wrapper楂樺害濉岄櫡锛屾鏃舵垜浠墜鍔ㄥ垱寤築FC鍖哄煙锛屽啀鐪嬬湅鏁堟灉锛屾敼鍔ㄥ涓嬶細.wrapper { width: 600px; border: 4px solid #cfc; overflow: hidden;}姝ゆ椂锛岄〉闈㈠睍绀哄涓嬶細.wrapper鐨勯珮搴︽仮澶嶆甯革紒姣忎釜鍏冪礌鐨勫乏澶栬竟璺濅笌鍖呭惈鍧楃殑宸﹁竟鐣岀浉鎺ヨЕ鎴戜滑鐭ラ亾锛屽鏋滅洅瀛愭墦寮€浜唂loat锛岃劚绂绘枃妗ｆ祦涓斾笉鍗犱綅锛屾寜鐓FC鐨勭壒鐐癸紝鍧楀唴姣忎釜鍏冪礌鐨勫乏杈硅窛閮戒細涓庡寘鍚潡鐨勫乏杈硅窛閲嶅悎锛屼妇涓煂? <style> body { position: relative; } .main { width: 300px; height: 200px; line-height: 200px; text-align: center; background-color: #f3eaff; color: #8857cd; font-weight: bold; border: 2px solid red; } .side { width: 100px; height: 200px; line-height: 200px; text-align: center; background-color: #f3eaff; color: #8857cd; font-weight: bold; border: 2px solid yellow; float: left; } </style> </head> <body> <div class="side">浣犲ソ鏈嬪弸</div> <div class="main">HoMeTown</div> </body>椤甸潰灞曠ず濡備笅锛?side寮€鍚诞鍔紝宸﹀杈硅窛涓巄ody鐨勫乏杈归噸鍚堬紝.main涔熸槸锛岃繖骞朵笉鏄垜浠兂鐪嬪埌鐨勶紝閭ｄ箞锛屽彲浠ュ埄鐢˙FC鐨勭壒鐐癸紝BFC鍖呭惈涓婁笅鏂囧厓绱犱腑鐨勬墍鏈夊瓙鍏冪礌锛屼絾涓嶅寘鎷唴鍒涘缓浜嗘柊鐨凚FC鐨勫瓙鍏冪礌鐨勫唴閮ㄥ厓绱狅紝鎵嬪姩缁?main鍒涘缓BFC锛屾敼鍔ㄥ涓嬶細.main { ... overflow: hidden;}姝ゆ椂椤甸潰灞曠ず濡備笅锛氭垚鍔燂紒鎬荤粨BFC鍐呴儴鐨勬覆鏌撹鍒欙紝鍦ㄧ幇浠lex甯冨眬涓叾瀹炴湁鏇村鐨勮В鍐虫柟妗堬紝浣嗘槸浣滀负涓€涓亴涓氬墠绔紝杩樻槸闇€瑕佷簡瑙ｄ竴涓嬨€備互涓婂氨鏄垜鐨勮瑙ｏ紝涓嶅枩鍕垮柗銆?/p>
