[TIL] 1105 LikeLion๐Ÿฆ FES 05

float

inline ์š”์†Œ๋Š” float๋œ ์š”์†Œ๋ฅผ ์•Œ์•„๋ณธ๋‹ค. ๊ทธ๋ž˜์„œ ์‚ฌ์ง„ ๋ฐ‘์œผ๋กœ ๋“ค์–ด๊ฐ€์ง€ ์•Š๊ณ  ๊ฐ์‹ธ๋Š” ํ˜•ํƒœ๊ฐ€ ๋œ๋‹ค.

float ํ•ด์ œ์‹œํ‚ค๋Š” ๋ฐฉ๋ฒ•

overflow: hidden

๋ถ€๋ชจ๊ฐ€ float๋œ ์ž์‹์„ ์•Œ์•„๋ณด๊ฒŒ ํ•œ๋‹ค

clear-fix

float๋œ ์ž์‹์š”์†Œ๋ฅผ ๊ฐ€์ง„ ๋ถ€๋ชจ์š”์†Œ์—๊ฒŒ clear-fix๋ผ๋Š” ํด๋ž˜์Šค๋ฅผ ๋ถ€์—ฌํ•˜๊ณ  ๊ฐ€์ƒ์š”์†Œ๋ฅผ ๋งŒ๋“ค์–ด์„œ ๊ฐ€์ƒ์š”์†Œ์— clear:left or right or both;

clear-fix::after {
	display: block;
	content: "";
	clear: both;
}

CSS Float ๋ฐ Clear ์„ค๋ช…-CSS float ๋ฐ clear๋Š” ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๊นŒ?
๋ฌด์—‡์ด ์ œ์ผ ๋‚˜์€ float ํ•ด์ œ ๊ธฐ๋ฒ•์ธ๊ฐ€?
CSS ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ 1๋ถ€ โ€“ floats, positioning, display, float-root, table
Float ํ•ด์ œ(Clear)

๊ฐ€์ƒ์š”์†Œ

::before๋Š” ์ฒซ๋ฒˆ์งธ ์ž์‹ ์š”์†Œ
::after๋Š” ๋งˆ์ง€๋ง‰ ์ž์‹ ์š”์†Œ

๊ฐ€์ƒ์š”์†Œ์— ์ด๋ฏธ์ง€ ๋„ฃ๊ธฐ

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ