높이 붕괴, --- 필요한 지식을 삭제 CSS 박스 모델을 떠!

문서 흐름

1 문서 흐름 특성의 요소 :

블록 요소 : 문서의 흐름 전용선 상기 부모 요소의 문서 흐름의 기본 폭 기본 높이 콘텐츠 연화 100 %이다.

인라인 요소 : 선이 왼쪽에서 오른쪽으로 다음 줄로 계속 인라인 다수의 요소를 수용하기에 충분하지 않은 경우 자체 만, 스트림 문서의 크기;

높이 연화 콘텐츠입니다.

2 문서 스트림으로부터 소자 후 내용물 폭 높이 (블록 요소가 될 문서 플로우 벗어나지 인라인 요소)를 연신한다.

플로트

원하는 블록 요소는 문서 흐름 요소 플로트 부동 이용하여 페이지 레벨에 배치하는 경우 (1)는, 블록 요소는 문서의 기본 흐름에 수직으로 배열.

2 서 흐름 엘리먼트 후, 그 요소의 바로 아래까지 이동한다.

3, 부동 요소는 ** ** 부모 요소의 경계를 만날 때까지, 왼쪽 상단 또는 페이지의 오른쪽 상단을 떠하려고합니다 후

　　(본문 테두리 간주 될 수있다) 또는 다른 유동 요소.

소자 부동 문서 요소 (아닌 경우 두 요소의 부모 - 자식 관계)의 흐름을 포함한다.

(4) 상부 부유 요소는 부유없이 블록 요소 인 경우, 부유 요소 (A 라인) 블록 요소를 초과하지 않는다.

5, 부동 요소가 형제의 상단을 초과하지 않습니다 (그의 당은 모두 부동 요소를 용인 할 수 없다, 다른 부동 요소 바꿈됩니다).

높이 문제 붕괴

1 하위 요소없이 콘텐츠 또는 부동 후에 고도로 축소 된 부모 요소, 모든 요소는 아래의 페이지 레이아웃이 혼란까지 위로한다.

2 BFC 요소를 열려면 다음과 같은 기능을 가지고 있습니다 :

A, 부모 요소 외부의 수직 거리 및 자식 요소 겹치지 것이다;

B, 플로팅 요소 덮어 않을 것이다;

C는 플로트 ** ** 하위 요소를 포함 할 수있다.

3, 여는 방법 (권장) : 부모 오버 플로우에 추가 요소를 : 숨겨진;

다음 IE6 브라우저는 BFC를 지원하지 않지만, 한 줌의 hasLayout의 --- 요소를 설정하여 해결할 수 있습니다.

.box1 {

현황 : 1;

오버 플로우 : 숨겨진;

}

높이 붕괴 솔루션

1, 옵션 1 : 맑은 맑은와 현재 요소의 다른 부동 요소에 영향을 미칩니다.

옵션 명확한 값 : 없음 명확하지 플로트;

left：清除左侧浮动元素对当前元素的影响；

right：清除右侧浮动元素对当前元素的影响；

both：清除两侧浮动元素对当前元素的影响；

（实际上是清除对当前元素影响最大的那个元素的浮动）

2、方案二：在高度塌陷的父元素最后添加一个空白的div。

用这个空白的div来撑开父元素的高度再对其消除浮动。

对空白div有：clear:both;

模板

clearfix:after{

content:"";

display:block;

clear:both;

}

clearfix{

zoom:1;

}