CSS ¼Ó¼º °¡¿îµ¥ float ¼Ó¼ºÀº ÀÚ±â ÀÚ½ÅÀÇ À§Ä¡¸¦ ÁÖº¯ÀÇ ÄÜÅÙÃ÷·ÎºÎÅÍ »ó´ëÀûÀ¸·Î ¹èÄ¡ÇÏ´Â ¼Ó¼ºÀÔ´Ï´Ù.
floatÀº »çÀüÀû Àǹ̷Π¡®¶ß´Ù, ¶ç¿ì´Ù, ¶ß´Â ¹°°Ç, ºÎÀ¯¹°¡¯ À̶ó´Â Àǹ̰¡ ´ã°ÜÁ® ÀÖ½À´Ï´Ù.
floatÀº ³ôÀÌ°¡ °¡º¯ÀûÀÎ ´Ù´Ü Ä÷³ ÇüÅÂÀÇ CSS ·¹À̾ƿôÀ» À§ÇÏ¿© ¹Ýµå½Ã ¿ä±¸µÇ´Â ¼Ó¼ºÀ¸·Î¼ óÀ½ CSS ¹èÄ¡±â¹ýÀ» ÀÍÈú ¶§ °¡Àå ÀÌÇØÇϱ⠾î·Á¿î ¼Ó¼ºÁßÀÇ Çϳª ÀÔ´Ï´Ù.
float ¼Ó¼ºÀÌ ºÎ¿©µÈ ¿¤¸®¸ÕÆ®´Â ÁÂÃøÀ̳ª ¿ìÃøÀ¸·Î ¹èÄ¡µÇ¸é¼ ÁÖº¯ ÄÜÅÙÃ÷ÀÇ ¹èÄ¡¿¡µµ ¿µÇâÀ» ¹ÌÄ£´Ù´Â »ç½ÇÀº ¾î·ÆÁö ¾Ê°Ô ÇнÀµÇ³ª ¡®float µÈ ¿¤¸®¸ÕÆ®°¡ ºÎ¸ð ¿¤¸®¸ÕÆ®ÀÇ ³ôÀÌ¿¡ ¿µÇâÀ» ÁÖÁö ¾Ê´Â´Ù´Â »ç½Ç¡¯Àº ¸î ¹øÀÇ °æÇè ¶Ç´Â ¼±¹èµéÀÇ Á¶¾ðÀ¸·Î ±ú´Ý°Ô µÇ´Â °ÍÀÌÁö¿ä.
¿À´ÃÀº float ¼Ó¼ºÀ» ÀÌÇØÇÏ°í ´Ù´Ü Ä÷³Çü ·¹À̾ƿôÀ» ½ÃµµÇÒ ¶§ ÁÖº¯ ¿¤¸®¸ÕÆ®µéÀÌ ¿øÇÏ´Â »óÅ·Π¹èÄ¡µÉ ¼ö ÀÖµµ·Ï ÀÌ°Í¿¡ ´ëÀÀÇϰųª clear ÇÏ´Â ¹æ¹ý¿¡ ´ëÇÏ¿© °øÀ¯ÇÏ°íÀÚ ÇÕ´Ï´Ù. clear ¼Ó¼ºÀº floatÀÌ ´õÀÌ»ó ÁÖº¯ ¿¤¸®¸ÕÆ®ÀÇ ¹èÄ¡¿¡ ¿µÇâÀ» ¹ÌÄ¡Áö ¾Êµµ·Ï ÇØÁ¦½ÃÅ°´Â ¼Ó¼ºÀÔ´Ï´Ù. ¸¸¾à Internet Explorer ºê¶ó¿ìÀú¸¦ »ç¿ëÇÏ¿© ÇнÀÀ» ½ÃµµÇϽŴٸé ÀÏ´Ü ¸ØÃ߽ðí Ç¥ÁØ°è¿ ºê¶ó¿ìÀú¿¡¼ ¸ÕÀú ½ÃµµÇØ º¸¼¼¿ä. CSS Ç¥ÁØ ·»´õ¸µÀ» ¾ö°ÝÇÏ°Ô ÁؼöÇÏ´Â Opera¿Í Safari¸¦ ±ÇÀåÇÕ´Ï´Ù. Internet Explorer¿Í Firefox ºê¶ó¿ìÀú´Â float, clear ¼Ó¼º¿¡ °üÇÑ ¹ö±×¸¦ Æ÷ÇÔÇÏ°í ÀÖÀ¸¹Ç·Î float°ú clearÀÇ Ç¥ÁØ ·»´õ¸µÀÌ ¾î¶»°Ô ±¸ÇöµÇ´ÂÁö¸¦ ÇнÀÇÒ ¶§ µµ¿òÀÌ µÇÁö ¾Ê½À´Ï´Ù. ÇÏÁö¸¸ ¹ö±×¸¦ ÇØ°áÇÏ´Â ¹æ¹ýµµ ¼Ò°³µÇ¾î ÀÖÀ¸´Ï ¾È½ÉÇϼ¼¿ä.
¿À´Ã ±ÛÀÇ ÇÙ½ÉÀº ¡®floatµÈ ÀÚ½Ä ¿¤¸®¸ÕÆ®ÀÇ ³ôÀ̸¦ ºÎ¸ð ¿¤¸®¸ÕÆ®¿¡ ¹Ý¿µÇϵµ·Ï ´ëÀÀÇÏ´Â ¹æ¹ý¡¯ À̶ó°í ÇѸ¶µð·Î ¼³¸íÇÒ ¼ö ÀÖ°Ú½À´Ï´Ù. ºÎ¸ð ¶°³ ÀÚ½ÄÀ» ´Ù½Ã ºÎ¸ðÀÇ Ç° ¾ÈÀ¸·Î µ¹¾Æ¿Àµµ·Ï ÇÏ·Á¸é ¾î¶»°Ô ÇØ¾ß ÇÏ´ÂÁö Çѹø »ìÆì º¸½ÃÁÒ.
float¿¡ ¾Æ¹«·± ´ëÀÀµµ ÇÏÁö ¾ÊÀº »óÅÂ
#container´Â ºÎ¸ð ¿¤¸®¸ÕÆ®À̸ç #lnb¿Í #content´Â ÀÚ½Ä ¿¤¸®¸ÕÆ®·Î¼ ÇöÀç floatµÈ »óÅ ÀÔ´Ï´Ù. ¾Æ·¡ ¿¹Á¦´Â float¿¡ ¾Æ¹«·± ´ëÀÀÀ» ÇÏÁö ¾ÊÀ¸¸é ÀÚ½Ä ¿¤¸®¸ÕÆ®°¡ ºÎ¸ð ¿¤¸®¸ÕÆ®ÀÇ ³ôÀÌ¿¡ ¿µÇâÀ» ÁÖÁö ¾Ê´Â´Ù´Â »ç½ÇÀ» º¸¿©ÁÖ°í ÀÖ½À´Ï´Ù. #containerÀÇ ³ôÀÌ°¡ ÀÚ½Ä ¿¤¸®¸ÕÆ®ÀÇ ³ôÀ̸¦ ¹Ý¿µÇÏÁö ¾Ê°í ÀÖ´Ù´Â »ç½Ç¿¡ ÁÖ¸ñÇØ ÁÖ¼¼¿ä. float¿¡ ¾Æ¹«·± ´ëÀÀµµ ÇÏÁö ¾ÊÀº »óÅÂÀÇ ¿¹Á¦°¡ ÁغñµÇ¾î ÀÖ½À´Ï´Ù.
float¿¡ floatÀ¸·Î ´ëÀÀÇÏ´Â ¹æ¹ý
ÀÚ½Ä ¿¤¸®¸ÕÆ®ÀÇ ³ôÀ̸¦ ºÎ¸ð¿¡°Ô ¹Ý¿µÇÏ´Â ¹æ¹ýÀ¸·Î ºÎ¸ð¿¡°Ôµµ float ¼Ó¼ºÀ» ºÎ¿©ÇÏ´Â ¹æ¹ýÀÌ ÀÖ½À´Ï´Ù. ºÎ¸ð¿¡°Ô float ¼Ó¼ºÀ» ºÎ¿©ÇÏ°Ô µÇ¸é ºÎ¸ð¿¤¸®¸ÕÆ®´Â ÀÚ½Ä ¿¤¸®¸ÕÆ®ÀÇ ³ôÀ̸¦ ¹Ý¿µÇÕ´Ï´Ù. ÇÏÁö¸¸ ºÎ¸ð ¿¤¸®¸ÕÆ®ÀÇ ³Êºñ´Â floatµÈ µÎ ÀÚ½ÄÀÇ ³Êºñ¸¦ ´ãÀ»¸¸Å¸¸ ÀÛ°Ô ÁÙ¾îµç´Ù´Â »ç½Ç¿¡ ÁÖ¸ñÇØ ÁÖ¼¼¿ä. ºÎ¸ðÀÇ ³Êºñ°¡ ºê¶ó¿ìÀú Å©±â¿¡ µû¶ó °¡º¯ÀûÀ̾î¾ß ÇÏ´Â °æ¿ì¿¡ Àû¿ëÇϱ⠾î·Á¿î ´ÜÁ¡ÀÌ ÀÖ½À´Ï´Ù. ¶ÇÇÑ Á¶»ó ¿¤¸®¸ÕÆ®µéÀÌ °ã°ãÀÌ Á¸ÀçÇÏ´Â °æ¿ì ÀÚ½ÄÀÇ ³ôÀ̸¦ Á¶»ó ¿¤¸®¸ÕÆ®¿¡°Ô °¢°¢ Àü´ÞÇϱâ À§ÇÏ¿© Á¶»ó ¿¤¸®¸ÕÆ®µéÀ» ¸ðµÎ float ½ÃÄÑ¾ß ÇϹǷΠÀϹÝÀûÀ¸·Î »ç¿ëÇϴ°ÍÀ» ±ÇÀåÇÏÁö ¾Ê½À´Ï´Ù. float¿¡ floatÀ¸·Î ´ëÀÀÇÏ´Â ¹æ¹ý ¿¹Á¦.
float¿¡ overflow ¼Ó¼ºÀ¸·Î ´ëÀÀÇÏ´Â ¹æ¹ý
ÀÚ½Ä ¿¤¸®¸ÕÆ®ÀÇ ³ôÀ̸¦ ºÎ¸ð¿¡°Ô ¹Ý¿µÇÏ´Â ¹æ¹ýÀ¸·Î ºÎ¸ð ¿¤¸®¸ÕÆ®¿¡ overflow:auto ¶Ç´Â overflow:hidden ¼Ó¼ºÀ» ºÎ¿©ÇÏ´Â ¹æ¹ýÀÌ ÀÖ½À´Ï´Ù. overflow:auto ¼Ó¼ºÀº ÀÚ½ÄÀÇ ³Êºñ°¡ °¡º¯ÀûÀÌ°í ºÎ¸ðÀÇ ³Êºñº¸´Ù Ä¿Áö´Â »óȲÀÌ ¹ß»ýÇÒ ¶§ °¡·Î ½ºÅ©·Ñ¹Ù¸¦ À¯¹ßÇϱ⠶§¹®¿¡ ÀϹÝÀûÀ¸·Î ±ÇÀåÇÏ´Â ¹æ½ÄÀÌ ¾Æ´Õ´Ï´Ù. overflow:hidden ¼Ó¼ºÀº ±×·¯ÇÑ »óȲ¿¡¼ °¡·Î ½ºÅ©·Ñ¹Ù¸¦ À¯¹ßÇÏÁö´Â ¾ÊÁö¸¸ ÀÚ½ÄÀÇ ³Êºñ°¡ ³ÑÄ¡´Â °æ¿ì ³ÑÄ¡´Â ºÎºÐÀÌ À߸®±â ¶§¹®¿¡ ÀÌ ¿ª½Ã ¿ÏÀüÇÏ°Ô ¾ÈÀüÇÑ ¹æ¹ýÀº ¾Æ´Õ´Ï´Ù. float¿¡ overflow ¼Ó¼ºÀ¸·Î ´ëÀÀÇÏ´Â ¹æ¹ý ¿¹Á¦.
floatÀ» ºó ¿¤¸®¸ÕÆ®·Î clear ÇÏ´Â ¹æ¹ý
ÀÌ ¹æ¹ýÀº #container ¿µ¿ªÀÌ ³¡³ª±â Á÷Àü ºó ¿¤¸®¸ÕÆ®¸¦ ³Ö°í ºó ¿¤¸®¸ÕÆ®¿¡ clear:both ¼Ó¼ºÀ» ºÎ¿©ÇÏ¿© ºÎ¸ð°¡ ÀÚ½ÄÀÇ ³ôÀ̸¦ ÀνÄÇϵµ·Ï ÇÏ´Â ¹æ¹ýÀÔ´Ï´Ù. ÇÏÁö¸¸ ÀÇ¹Ì ¾ø´Â ºó ¿¤¸®¸ÕÆ®¸¦ »ç¿ëÇϱ⠶§¹®¿¡ ÀÌ ¿ª½Ã ±ÇÀåµÇ´Â ¹æ¹ýÀº ¾Æ´Õ´Ï´Ù. floatÀ» ºó ¿¤¸®¸ÕÆ®·Î clear ÇÏ´Â ¹æ¹ý ¿¹Á¦. ¿¹Á¦¿¡¼´Â .clear ¶ó´Â ºó ¿¤¸®¸ÕÆ®¸¦ °¡½ÃÀûÀ¸·Î º¸À̵µ·Ï ÇÏ¿´Áö¸¸ ½Ç¹«¿¡¼´Â º¸Åë .clear {clear:both; height:0; overflow:hidden;} ó¸®ÇÏ¿© .clear ¶ó´Â ºó ¿¤¸®¸ÕÆ®°¡ ½º½º·Î ³ôÀ̸¦ °®Áö ¾Êµµ·Ï ÇÏ°í º¸ÀÌÁö ¾Êµµ·Ï ó¸® ÇÕ´Ï´Ù.
floatÀ» °¡»ó ¼±ÅÃÀÚ :after·Î clear ÇÏ´Â ¹æ¹ý
°¡Àå Ź¿ùÇÏ´Ù°í »ý°¢ÇÏ´Â ¹æ¹ý ÀÔ´Ï´Ù. ¿ì¼± ¡®°¡»ó ¼±ÅÃÀÚ¡®¶ó´Â °³³äÀ» ÀÌÇØÇÏ¼Å¾ß Çϱ⠶§¹®¿¡ ¾à°£ »ó¼¼È÷ ¼³¸íµå¸®°Ú½À´Ï´Ù. ¿©·¯ºÐµéÀÌ ÀÍÈ÷ ¾Ë°í °è½Ã´Â :link, :visited, :hover, :active, :focus´Â ¸ðµÎ °¡»ó ¼±ÅÃÀÚ ÀÔ´Ï´Ù. ¡®°¡»ó ¼±ÅÃÀÚ¡¯´Â ´Ù½Ã ¡®°¡»ó Ŭ·¡½º¡®¿Í ¡®°¡»ó ¿¤¸®¸ÕÆ®¡®·Î ±¸ºÐÇÒ ¼ö Àִµ¥¿ä. ¡®°¡»ó Ŭ·¡½º¡®´Â ƯÁ¤ ¿¤¸®¸ÕÆ®¿¡ ´ëÇÏ¿© ¾Æ¹«·± class¸¦ ºÎ¿©ÇÏÁö ¾Ê¾ÒÁö¸¸ ¸¶Ä¡ ¿ªµ¿ÀûÀ¸·Î class¸¦ º¯°æÇÑ°Í°ú °°Àº È¿°ú¸¦ ³¾ ¼ö ÀÖ´Â °Íµé·Î¼ ÀÌ¹Ì Á¸ÀçÇÏ´Â ¿¤¸®¸ÕÆ®¿¡ Á¶ÇÕÇؼ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. :link, :visited, :hover, :active, :focus, :first-child°¡ °¡»ó Ŭ·¡½º¿¡ ÇØ´çµË´Ï´Ù. ÇÑÆí ¡®°¡»ó ¿¤¸®¸ÕÆ®¡®¶õ, Á¸ÀçÇÏÁö ¾Ê´Â ¿¤¸®¸ÕÆ®¸¦ °¡»óÀ¸·Î »ý¼ºÇس»´Â ¼±ÅÃÀڷμ :first-line, :first-letter, :before, :after°¡ ÀÖ½À´Ï´Ù. ½ÉÁö¾î :before¿Í :after´Â HTML¹®¼»ó¿¡ Á¸ÀçÇÏÁö ¾Ê´Â ÄÜÅÙÃ÷¸¦ Ãâ·Â½ÃÅ°±âµµ ÇÕ´Ï´Ù. Hello World CollectionÀ̶ó´Â À¥ »çÀÌÆ®¿¡ ½ÅÇö¼®´ÔÀÌ ¡®Hello World¡¯¶ó´Â ¸Þ½ÃÁö¸¦ ¾î¶»°Ô Ãâ·ÂÇß´ÂÁö »ìÆ캸½Ã¸é Àç¹ÌÀÖ°í ÀÌÇØÇϱ⵵ ½±ÁÒ. ÀÌ·¸°Ô °¡»óÀÇ ¿¤¸®¸ÕÆ®¸¦ »ý¼º #container:after {content:" "} ½ÃŲ ´ÙÀ½ display:block; clear:both 󸮸¦ Ãß°¡ÇÏ°Ô µÇ¸é ÀÇ¹Ì ¾ø´Â ºó ¿¤¸®¸ÕÆ®¸¦ »ç¿ëÇÏÁö ¾ÊÀ¸¸é¼µµ °¡»ó ¿¤¸®¸ÕÆ®¸¦ ÀÌ¿ëÇÏ¿© ±ò²ûÇÏ°Ô floatÀÌ clearµË´Ï´Ù. floatÀ» °¡»ó ¼±ÅÃÀÚ :after·Î clear ÇÏ´Â ¹æ¹ý ¿¹Á¦.
»ó±â ¿¹Á¦·ÎºÎÅÍ °¡»ó ¿¤¸®¸ÕÆ®°¡ ½º½º·Î ³ôÀ̸¦ °®Áö ¾Ê°í ȸ鿡 º¸ÀÌÁö ¾Êµµ·Ï ó¸® ÇÏ·Á¸é ¾Æ·¡¿Í °°ÀÌ Ã³¸® ÇÕ´Ï´Ù.
#container:after {content:""; display:block; clear:both;}
ÇÏÁö¸¸ Internet Explorer´Â :before, :after °¡»ó ¿¤¸®¸ÕÆ® ¼±ÅÃÀÚ¸¦ Áö¿øÇÏÁö ¾Ê±â ¶§¹®¿¡ ´ÙÀ½°ú °°Àº HackÀÌ ÇÊ¿äÇÕ´Ï´Ù.
#container {*zoom:1;} /* IE5.5~7 ºê¶ó¿ìÀú ´ëÀÀ Hack */
#container:after {content:" "; display:block; clear:both;} /* Ç¥ÁØ°è¿ ºê¶ó¿ìÀú¿¡ ´ëÀÀÇÏ´Â float ÇØÁ¦¿ë °¡»ó ¿¤¸®¸ÕÆ®ÀÇ »ý¼º */
IE 5~7 ºê¶ó¿ìÀú´Â hasLayoutÀ̶ó´Â °íÀ¯ÇÑ ¼ºÁúÀ» °®°Ô µÇ¸é floatÀ» ÇØÁ¦ÇÏ´Â Æ®¸®°Å·Î ÀÛ¿ëÇÏ´Â ¼ºÁúÀÌ ÀÖ°í zoom:1 ¼Ó¼ºÀÌ hayLayout À̶ó´Â ¼ºÁúÀ» °®µµ·Ï Çϱ⠶§¹®¿¡ IE 5~7 ºê¶ó¿ìÀú °íÀ¯ÀÇ Æ¯Â¡À» ÀÌ¿ëÇÑ ÇØ°á¹æ¹ý ÀÔ´Ï´Ù.
floatÀ» display:inline-block À¸·Î clear ÇÏ´Â ¹æ¹ý
floatµÈ ÀڽĿä¼ÒµéÀÇ ³ôÀ̸¦ ºÎ¸ð¿¡°Ô Àü´ÞÇÏ´Â ¹æ¹ýÀ¸·Î½á ºÎ¸ð ¿ä¼Ò¿¡ display:inline-block¼Ó¼ºÀ» ºÎ¿©ÇÏ´Â ¹æ¹ýµµ ÀÖ½À´Ï´Ù. [ÄÚ¸àÆ® ÇØÁֽŠ±è¿µÈ¯´Ô °¨»çÇÕ´Ï´Ù] inline-block ¼Ó¼ºÀÌ ºÎ¿©µÈ ¿ä¼Ò´Â floatµÈ ÀÚ½ÄÀÇ ³ôÀ̸¸Å ´Ã¾î³³´Ï´Ù. [CSS 2.1 °ü·Ã ¼³¸í ÄÚ¸àÆ® ÇØÁֽŠ¿¬È«¼®´Ô °¨»çÇÕ´Ï´Ù] ¸ðµç ºê¶ó¿ìÀú°¡ µ¿ÀÏÇÏ°Ô floatÀ» ÇØÁ¦ÇÏ´Â ¹æÇâÀ¸·Î ÀÛ¿ëÇÕ´Ï´Ù. ´Ü, Ç¥ÁØ°è¿ ºê¶ó¿ìÀúµéÀº ºÎ¸ð ¿ä¼ÒÀÇ ³Êºñ°¡ ÀÚ½ÄÀÇ ³Êºñ¸¸Å ¾Ë¸Â°Ô ÁÙ¾îµéÁö¸¸ IE 6~7 ºê¶ó¿ìÀú´Â 100%ÀÇ ³Êºñ¸¦ °®°Ô µÇ´Â Ư¡ÀÌ ÀÖ½À´Ï´Ù. ¶ÇÇÑ inline-block ¼Ó¼ºÀ» °®°Ô µÈ ¿ä¼Ò´Â ÀζóÀÎ ¿ä¼Ò¿Í ¸¶Âù°¡Áö·Î ¹Ú½º°¡ ³¡³ª´Â ÁöÁ¡¿¡ ¾à 4px Á¤µµÀÇ °ø¹éÀ» °®°Ô µÇ¹Ç·Î ÀÌÁ¡ À¯³äÇÏ½Ã´Â°Ô ÁÁ°Ú½À´Ï´Ù.
Ãâó : http://naradesign.net/wp/2008/05/27/144/