CSS 플로팅 클리닝, clear:both tag_Experience 교환을 사용하지 마세요
- WBOY원래의
- 2016-05-16 12:05:251455검색
예를 들면 다음과 같습니다.
40px;배경:#EEE; Content
"
이 시점에서 이 코드를 미리 보면 가장 바깥쪽 상위 요소인 플로트 컨테이너는 표시되지 않습니다. 이는 하위 요소가 부동되어 문서 흐름에서 벗어나 상위 요소의 높이가 0이 되기 때문입니다.
코드를 다음과 같이 수정하는 경우:
width:30%; height:40px;ground:#EEE; ">일부 콘텐츠
;
추가 부분이 있습니다. 수레를 정리하는 코드입니다. 이는 좋은 CSS 코딩 방법이지만 이 접근 방식은 쓸모 없는 요소를 추가합니다. 더 좋은 방법은 다음과 같이 HTML 코드를 수정하는 것입니다.
div style="float:left; width:30%; height:40px;ground:#EEE; ">일부 콘텐츠
"플로트 정리" 컨트롤:
코드 복사
코드는 다음과 같습니다. .clearfix:after {} { content: "." clear:both;
height: 0; visible:hidden;
display:block
} /* Firefox는 생성된 요소를 지원하지만 모든 버전의 IE에서는 지원하지 않습니다. 생성된 요소 지원 */
.clearfix {}{
디스플레이: inline-block; 브라우저에서 수행되는 처리 */
/**//* IE-mac에서 숨깁니다. */
* html .clearfix {}{ height: 1%;} /* Win에서 IE 브라우저에서 수행되는 처리입니다. */
.clearfix {}{display: block;} /* 디스플레이에 대한 수정입니다: inline-block;, 재설정 block 요소*/
/**//* IE-mac에서 숨기기 종료 */
이때 위 코드를 미리 보면(이 댓글 삭제) 자식 요소가 플로팅된 경우 상위 요소 플로트 컨테이너는 높이 조정을 위해 여전히 이를 둘러쌉니다.
display:block
} /* Firefox는 생성된 요소를 지원하지만 모든 버전의 IE에서는 지원하지 않습니다. 생성된 요소 지원 */
.clearfix {}{
디스플레이: inline-block; 브라우저에서 수행되는 처리 */
/**//* IE-mac에서 숨깁니다. */
* html .clearfix {}{ height: 1%;} /* Win에서 IE 브라우저에서 수행되는 처리입니다. */
.clearfix {}{display: block;} /* 디스플레이에 대한 수정입니다: inline-block;, 재설정 block 요소*/
/**//* IE-mac에서 숨기기 종료 */
이때 위 코드를 미리 보면(이 댓글 삭제) 자식 요소가 플로팅된 경우 상위 요소 플로트 컨테이너는 높이 조정을 위해 여전히 이를 둘러쌉니다.