챕 터 13 부동 레이아웃

유동 제거 방법
용기 자체 보다 요소 가 더 높 을 때 외곽 div 가 넘 칩 니 다. 그러면 넘 치 는 요 소 는 용기 의 일부분 처럼 보이 지 않 습 니 다.http://www.complexspiral.com/publications/containing-floats/

외곽 div 의 아래쪽 에 제거 요 소 를 추가 하고 하나의 표정 만 추가 하면 됩 니 다. 예 를 들 어 줄 바 꾸 기 나 수평 규칙, 예 를 들 어 유동 요 소 를 포함 한 div 의 마지막 항목 입 니 다.그리고 clear 속성 을 이용 하여 이 탭 을 유동 요소 아래로 강제로 이동 시 킵 니 다.이 기법 은 외곽 div 를 확대 하여 배경 과 테 두 리 를 드 러 내 는 것 이다.단점 은 html 코드 를 추가 로 추가 해 야 한 다 는 것 이다

.

...

br.clear { clear: both; }

유동 외곽 요 소 는 더욱 간단 한 방법 은 유동 요 소 를 포함 한 div 도 직접 움 직 이 는 것 이다. 움 직 이 는 용기 div 가 확대 되 고 그 안에 있 는 모든 유동 요 소 를 완전히 포함 한 다 는 것 을 알 수 있다.이 방법 을 선택 하면 유동 용기 뒤의 모든 요소 에 clear 속성 을 추가 하여 유동 요소 가 용기 아래로 떨 어 지 는 것 을 확보 해 야 합 니 다

.

overflow: hidden 을 이용 합 니 다.외곽 div 스타일 에 overflow: hidden 을 추가 합 니 다.그것 은 외부 모듈 을 유동 요 소 를 포함 하 는 것 으로 강제로 확대 할 것 이다.그러나 용기 에 요소 가 절대적 으로 위치 해 있 으 면 표시 되 지 않 을 수도 있다.

Micro Clear Fix 를 사용 하면 부동 요 소 를 포함 하 는 div 태그 에 스타일 과 클래스 이름 을 추가 하면 됩 니 다.

.clear:after {
    content: " ";
    display: table;
    clear: both;
}
.clear {
    zoom:1
}

...

zoom 은 IE 만 지원 합 니 다. 유효한 css 가 아 닙 니 다. w3c 인증 (외부 css 에 넣 을 수 있 습 니 다) 을 통과 하지 못 하지만 IE6 와 IE6 의 레이아웃 을 출발 할 수 있 습 니 다.
다 열 배열
https://www.w3.org/TR/css3-multicol/ http://dev.opera.com/articles/view/css3-multi-column-layout

 .multicol {
      column-count: 3;
      column-gap: 1em;
      column-rule: 1px dotted black;
}

사 이 드 바 를 끝까지 버 티 게 하 세 요.
http://css-tricks.com/fluid-width-equal-height-columns http://www.w3.org/TR/css3-flexbox http://www.w3.org/TR/css3-grid-layout

부모 층 div 에 배경 추가

    
Sidebar 
    
Content testsetsaadsf


.wrapper {
    background: url(image/col_bg.gif) repeat-y left top;
}

3 열의 경우

    
Sidebar 
    
Content testsetsaadsf


.wrapper1 {
    background: url(image/col_bg.gif) repeat-y left top;
}
.wrapper2 {
    background: url(image/col_bg.gif) repeat-y right top;
}

부동 원소 의 낙하 를 방지 하 다
부모 요소 가 모든 열 을 수용 할 공간 이 충분 하지 않 으 면 요소 가 떨 어 집 니 다 (float drop) 해결 방법:

box-sizing: content-box | padding-box | border-box;