CSS_float

float : 요소의 레벨에 상관없이 옆으로 나열

• left, right, none(기본값) center는 없다.
• 박스 위치 이동시키기.
• float은 하늘에 둥둥 떠있는 상태라고 보면 된다.
• 그래서 float두고 다음거는 float을 두지 않으면, 다음거는 땅에 있는 상태고 float은 떠있으니 땅에 있는 것이 안보이게 된다.
• 위와같이 두는 것이 싫다면 div로 감싸고 높이를 부여해주면 된다.
• margin-top은 안두는 것이 좋다. (최상단 안먹힘. float도 같이 내려옴. 이 이유 외에도 권장하지 않는 방법)
• 부모가 높이값 잡는 방법
• 1. 부모에 높이값 직접 적용 - 자식들의 필요 높이값이 바뀌면 부모도 코드 수정 필요
     => 유지보수가 어려움
     => 헤더는 정형화되어있어서 이 방법은 주로 헤더에 적용
     => hidden을 주면 펼쳐지는 메뉴가 보이지 않음
  2. overflow: hidden 또는 auto(근데 많이 안 씀) 적용 - 자식들의 높이값을 알아서 잡는다.
     => 넘치는 부분은 숨기는 거니까 넘치는 부분의 높이를 overflow가 알고 있음
     => 그래서 overflow가 중요한거임
     => 부모에게 overflow를 적용하면 됨
     => 본문에서 주로 적용
  3. 부모에 float을 적용시킨다. (최대한 안 쓰는 걸 추천)
     => 부모도 하늘에 띄워서 높이값을 가져오는 것
     => 부모도 하늘에 띄워져있으니까 밑에 뭔가를 놓는다면 땅에 붙여서 겹침. -> 그래서 밑에 놓는 거에 clear : both 넣거나 또 부모를 만들어서 float넣기(비추)
• clear: 상위요소(부모, 형제중 윗레벨 요소)에 float이 적용되어 있을 때 해당 요소의 높이값을 구해서 적용. (clear: both)
  => 부모는 여전히 높이를 못 구하고 있음.
  => left, right, both
  => float left를 쓰면 clear도 left를 써야한다. 하지만 both를 쓰면 둘 다 적용 가능.
  => 위가 float인 상태에서 아래(float아닐 때)에 margin을 주면 float값만큼 띄어져있으니 margin은 빈공간인 float공간에 먹혀서 결론적으로 margin이 안먹힌 것 처럼 보인다.
  => 그래서 clear:both를 잘 안씀

inline중 글씨나 이미지나 동영상(거의 다 임)은 무조건 보여주려고 하기 때문에 앞에서 float를 하고 후처리(overflow등등)를 안해도 보인다.
그리고 후에 block레벨이 오면 inline밑에 배치된다.

float으로 띄워놓고 밑에 div를 하나 생성해서(clearfix) clear:both;만 줘서 float로 띄운 영역의 높이값을 인식해놓으면 다음에 오는 영역은 띄운 영역 밑에 잘 위치할 수 있다.