부동 정보

텍스트 서라운드 효과

display : inline-block/table-cell/... position: absolute/fixed/sticky overflow:hidden/scroll

display:none position:absolute/fixed sticky

HTML의 중첩 관계는 다음과 같습니다.
div > img p
원리 해석: 1. img에float:left2,img를 감싸고(inline-block 파괴) 왼쪽으로 2, div 높이로 내려앉는다.
3. p원소의 내용은img을 둘러싸게 된다

4. 부동 제거

clear

활용

BFC(IE8+, 고급 브라우저)/haslayout(IE6, 7)

HTML Block 수평 요소 아래쪽으로 이동

CSS 애프터 위조 요소 하단 생성.clearfix:after{}clear에 대한 세 가지 값

무릇clear:left나clear:right가 작용하는 곳은clear:both로 대체할 수 있습니다!왜냐하면clear 속성은 자신이 앞의 부동 요소와 인접할 수 없기 때문이다. 여기서'앞의'세 글자를 주의하고float 속성은left 또는 right로 동시에 존재할 수 없다.clear 속성은 '뒤에 있는' 부동 요소에 대해 묻지 않기 때문에,clear:left가 유효할 때,clear:right는 반드시 무효입니다. 즉, 이때clear:left는clear:both를 설정하는 것과 같고, 반대로도 마찬가지입니다.따라서clear:left와clear:right 두 성명은 사용할 가치가 없습니다. 적어도 CSS 세계에서는 이렇습니다.clear:both를 직접 사용하세요.
장신욱의 정확한 이해 CSS clear:left/right의 의미 및 실제 용도
위조 요소를 통해clear 값을 사용합니다

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

4.2 BFC(IE8+, 고급 브라우저)/haslayout(IE6, 7)
4.2.1 BFC 소개 Block Format Content
간단히 말하면 BFC는 세 가지 특성을 가지고 있다

BFC는 수직 외곽 거리(margin-top, margin-bottom)의 접기를 막는다

BFC는 부동 요소를 겹치지 않습니다

.

BFC는 부동 설정 방식을 포함할 수 있음:

float:left/right; position:absolute/fixed; overflow:hidden/scroll(IE7+); display:inline-block/table-cell(IE8+);

4.2.2 hasLayout에 대해 IE6, 7에 hasLayout이라는 개념이 있는데 요소의 hasLayout 속성 값이true일 때 BFC와 비슷한 효과를 얻을 수 있다. 요소는 그 자체와 그 하위 요소의 사이즈 설정과 위치를 책임진다.IE6, 7에서 이러한 이점을 활용하여 부동 정리를 완료할 수 있습니다.
설정 방법:

width/height/zoom:1/..(IE6/IE7)

4.2.3 믿을 만한 해결 방안
IE+, 현대 브라우저에서 위조 요소를 사용하고 IE6, 7에서hasLayout을 사용합니다
현재 자주 사용하는 방법:

.floatfix{ *zoom:1;
}
.floatfix:after{ content:""; display:table|block; clear:both;
}

이 시나리오는 The very latest clearfix reloaded A new micro clearfix hack

5. 부동의 응용

두 난간은 레이아웃에 적응하고 세 난간은 레이아웃에 적응한다.
5.1 두 칸의 레이아웃 적응

float:left|right; display：table-cell; IE8+ display: inline-block; IE7

5.2 세 개의 열 배치

.left{ background:pink; float: left; width:180px; } .right{ background:lightblue; width:180px; float:right; } .center{ background:lightyellow; overflow:hidden; height:116px; }

나머지 참고 링크 CSS float 부동의 깊이 있는 연구, 상해 및 확대 (一) CSS float 부동의 깊이 있는 연구, 상해 및 확대 (二) CSS 청부동 처리(Clear와 BFC) BFC(블록급 형식 상하문)
부동 정보