Float(유동)개념 은 아마도 CSS 에서 가장 사람 을 현혹 시 키 는 개념 일 것 이다.Float 는 항상 잘못 이해 되 고 문맥 요 소 를 모두 움 직 여 가 독성,가용성 문제 로 비난 을 받는다.그러나 이런 문제 의 근원 은 이론 자체 가 아니 라 개발 자 와 브 라 우 저가 이론 에 대한 해석 에 있다. 만약 네가 변동 개념 을 진지 하 게 읽 어 본다 면,너 는 보 이 는 것 처럼 그렇게 복잡 하지 않다 는 것 을 알 게 될 것 이다.대부분의 문 제 는 오래된 버 전의 IE 가 가 져 온 것 이다.만약 네가 이 bug 들 을 안다 면,너 는 이 문제 들 을 피 할 수 있 을 것 이다. 우 리 는 이 문제 들 을 해결 하고 이전에 변동 을 사 용 했 던 오 해 를 풀 어 보 자.우 리 는 성 타 와 관련 된 문장 을 참고 하고 가장 중요 한 네가 반드시 알 아야 할 문 제 를 골 랐 다. What You Should Know About Floats ------------------------------------------------------------------------------------------------------------ "그림 과 글 을 둘 러 싼 실천 은 아주 오래 전 으로 거 슬러 올라간다.넷 스 케 이 프 1.1 부터 이 기능 이 브 라 우 저 에 도 입 된 이유 와 CSS 가 부동 속성 을 사용 하 는 이유 입 니 다.'Float(부동)'라 는 용 어 는 Netscape 1.1 과 함께 발 표 된'Additions'를 참조 합 니 다. to HTML "2.0'문 서 는 요소 가 어느 쪽으로 움 직 이 고 멈 추 는 표현 방식 을 설명 합 니 다.""유동 요소 의 포 지 셔 닝 은 정상 적 인 문서 흐름 을 바탕 으로 문서 흐름 에서 추출 하여 가능 한 한 멀리 왼쪽 이나 오른쪽으로 이동 합 니 다."문자 의 내용 은 유동 요소 주 위 를 둘러싸 고 있다."하나의 요소 가 정상 적 인 문서 흐름 에서 추출 된 후에 도 문서 흐름 에 있 는 다른 요 소 는 이 요 소 를 무시 하고 원래 의 공간 을 메 울 것 입 니 다." "요소 가 움 직 이면 자동 으로 블록 급 요소 로 변 합 니 다."이 요 소 는 현재 줄 의 왼쪽 이나 오른쪽으로 이동 할 수 있 습 니 다.속성 은 다음 과 같 습 니 다:float: left, float: right or float: none""당신 은 모든 유동 요소 에 너비 속성 을 설정 해 야 합 니 다(＜img＞요 소 를 제외 하고 함 축 된 너비 가 있 기 때 문 입 니 다)."폭 을 설정 하지 않 으 면 결 과 는 예측 할 수 없습니다.""예 를 들 어 유동 요 소 는 너비 속성 을 정의 해 야 합 니 다.명시 적 으로 지정 하 든 은밀 한 것 이 든."또한,가능 한 한 용기 요 소 를 수평 으로 채 워 서,부동 내용 이 아 닌 것 처럼 다른 내용 에 공간 을 주지 않 습 니 다.그 다음으로 정상 적 인 문서 흐름 의 요소 와 달리 유동 요소 의 수직 여백(margin)은 중첩 되 지 않 습 니 다.마지막 으로 유동 요 소 는 정상 적 인 문서 흐름 에 가 까 운 블록 급 요소 와 중첩 할 수 있 습 니 다."우선 우리 가 기억 해 야 할 것 은 유동 요소 가 왼쪽 이나 오른쪽 까지 만 움 직 일 수 있 고 중간 까지 움 직 이지 않 는 다 는 것 이다.이것 은 많은 초보 자 들 이 쉽게 범 할 수 있 는 잘못 이다.""가장 기본 적 인 규칙 을 기억 하 세 요.유동 요 소 는 양쪽 으로 만 움 직 일 수 있 습 니 다." "우리 가 원 소 를 움 직 이면 용기 의 가장자리 에 부 딪 힐 때 까지 오른쪽으로 움 직 이거 나 왼쪽으로 움 직 입 니 다."만약 우리 가 같은 방향 으로 원 소 를 하나 더 떠 다 니 면,그것 은 이전 부동 원소 의 가장자리 에 닿 을 때 까지 떠 다 닐 것 이다."만약 에 우리 가 더 많은 요 소 를 움 직 이면 그들 은 하나씩 배열 하지만 곧 공간 이 부족 할 것 이다.이 줄 이 더 많은 유동 요 소 를 수용 하지 못 하면 다음 유동 요 소 는 줄 을 바 꾸 어 계속 배열 할 것 이다." Containing blocks or containing boxes:"용기 요 소 는 다른 하위 요 소 를 포함 하 는 줄 이나 블록 급 요 소 를 말 합 니 다..." "명확 하 게 지정 되 었 을 때 유동 요소 의 수직 위 치 는 원래 문서 흐름 에서 의 위치 에 의 해 결정 되 고 정상 과 현재 줄 의 맨 위 에 있 습 니 다."그러나 수평 방향 에 서 는 가능 한 한 용기 요소 의 가장자리 로 이동 하지만 용기 요소 의 충전 거리(padding)를 따른다."같은 줄 의 요 소 는 유동 요 소 를 중심 으로 배열 되 어 있 습 니 다." "유동 요소 가 정상 적 인 문서 흐름 공간 을 차지 하지 않 기 때문에 유동 요소 의 앞 뒤 에 명확 하 게 지정 되 지 않 은 위 치 를 차지 하 는 블록 급 요 소 는 유동 요소 가 원래 있어 야 할 위 치 를 차지 합 니 다.마치 존재 하지 않 은 것 같 습 니 다."부동 원소 다음 줄 은 부동 원소 에 따라 폭 을 축소 합 니 다.유동 요소 이전의 요 소 는 다시 배열 되 어 독립 된 줄 을 차지 합 니 다.(번역 화해시키다 ff "이런 상황 에서 의 표현 은 다르다." "현재 줄 의 수평 방향 에 유동 요 소 를 수용 할 공간 이 충분 하지 않 으 면 이 요 소 를 수용 할 수 있 는 줄 이 있 을 때 까지 다음 줄 로 내 려 갑 니 다." "어떠한 유동 요소 도 원래 있 던 문서 의 위 치 를 초과 할 수 없습니다."유동 요소 의 맨 위 는 반드시 현재 줄 의 맨 위 와 정렬 됩 니 다(또는 현재 줄 요소 가 없 을 때 이전 블록 급 요소 의 맨 아래 가장자리 와 정렬 합 니 다)."부동 이론 을 진정 으로 이해 하려 면 CSS 에서 줄 이 무엇 인지 알 아야 합 니 다." (line box)。불 행 히 도 줄 이 무엇 인지 설명 하기 위해 서 는 줄 급 요소 가 무엇 인지 먼저 알 아야 한다.행 급 요 소 는 블록 급 요소 가 아 닌 것 을 말 합 니 다.예 를 들 어＜em＞행 은 논리 적 인 개념 이 고 가상 사각형 으로 이 줄 을 구성 하 는 모든 행 급 요 소 를 포함 하 며 그 높이 는 적어도 이 행 급 요소 중에서 가장 높 은 것 과 같 습 니 다." "우리 가 Div 의 모든 열 을 더 하면..." float: left 그것들 은 각각 왼쪽으로 배 열 될 것 이다.만약 우리 가 페이지 밑 에 한 쪽 의 꼬 릿 말 이 있 기 를 원한 다 면,가장 긴 열 이 필요 하지 않 을 것 이다. clear: both "유동 요 소 를 사용 하여 유동 요 소 를 포함 하 는 레이아웃 방식 은 잠재 적 인 단점 이 있 습 니 다.즉,페이지 가 계속 일치 하 는 표현 효 과 를 유지 할 수 있 는 지 여 부 는 브 라 우 저의 실현 여부 에 달 려 있 습 니 다."특히 유동 요소 가 더욱 복잡 한 구조의 일부분 이 라면 더욱 취약 해 질 것 이다.Clearing the floats ------------------------------------------------------------------------------------------------------------ "부동 원소 이후 의 원 소 는 자동 으로 이 부동 원 소 를 둘러싸 고 있 습 니 다."만약 당신 이 이렇게 하 기 를 원 하지 않 는 다 면,당신 은 이 요소 들 에'clear'속성 을 적용 할 수 있 습 니 다.이 속성 은 4 가지 설정 값 이 있 습 니 다:clear: left, clear: right, clear: both or clear: none'은 유동 요 소 를 정리 할 수 있 는 많은 기술 이 있 지만 추가 적 인 의미 없 는 라벨 을 도입 하지 않 습 니 다.다음 세 가 지 는 비교적 흔히 볼 수 있 는 방법 이다. a) 용기 원 소 를 함께 부동 시키다 b) 용기 요소 에 사용 하기 overflow: hidden c) 사용:after 와 같은 css 의사 클래스. "청소 요 소 를 삽입 하 는 것 은 용기 가 모든 유동 요 소 를 정확하게 감 싸 는 표준 적 인 방법 입 니 다.이렇게 하면 용기 밑 가장자리 에 있 는 요 소 를 감 싸 는 효과 가 있 습 니 다." "유동 디자인 을 바탕 으로 하 는 구조 에 있어 흔히 볼 수 있 는 문 제 는 유동 요소 의 용기 가 자동 으로 스 트 레 칭 되 어 유동 요 소 를 포함 하지 않 는 다 는 것 이다."모든 유동 요소 에 테 두 리 를 더 하고 싶다 면(예 를 들 어 용기 요소 에 테 두 리 를 더 하 는 것)명령 브 라 우 저 를 통 해 용 기 를 스 트 레 칭 해 야 합 니 다.오 버 플 로 우 를 사용 하 셔 도 됩 니 다. "method 방법." 사용:after 우리 가 사용 하 는 것 을 상상 해 보 세 요:after 는 점 호 를 삽입 하고 속성{clear: both;}。이것 이 바로 당신 이 해 야 할 모든 일 입 니 다.그러나 용기 밑 에 약간의 공간 이 있다 는 것 을 받 아들 이 는 사람 은 없습니다.그래서 우 리 는{height 를 설정 해 야 합 니 다. 0;} 화해시키다 {visibility: hidden;} 빈 틈 없 이
