무심결에 보 이 는 아주 좋 은 팁 입 니 다.닫 힌 유동 요 소 를 CSS 로 처리 하 는 방법 에 대해 소장 하고 있 습 니 다.닫 힌 유동 요소(clearing)에 대해 서 는 float)의 방법 은 이미 매우 많 습 니 다.당신 이 아직 모 르 면 old 9 의 blog 에 가서 보 세 요.닫 힌 유동 요소 가 있 습 니 다.제 가 제일 좋아 하 는 방법 은... 사용:after 위 류 는 움 직 이 는 요 소 를 제거 하 는 데 사 용 됩 니 다.아 쉽게 도 코드 의 양 이 너무 많아 서 간결 하지 않 습 니 다.지금 보니까 방법 이 엄 청 쉬 워 요.빨리 소개 해.원문 은http://annevankesteren.nl/2005/03/clearing-floats원 리 는 이 렇 습 니 다.외곽 요소 가 잘 연장 되 지 못 하 는 이 유 는 overflow 에 문제 가 있 습 니 다.overflow 가 보이 지 않 기 때 문 입 니 다.W3C 설명 참조
인용 내용:
In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.현재 외곽 요소 에 overflow:auto 를 추가 하면 됩 니 다.문 제 를 해결 할 수 있 습 니 다.결 과 는 IE 를 제외 하고 정말 해결 할 수 있 습 니 다.내 려 오 면 ie 문 제 를 해결 해 야 하 는데 게다가height:1%; ，이 문 제 는 완전히 해결 되 었 다.다음은 제 가 만 든 세 가지 예 를 비교 해 보 겠 습 니 다.1닫 힘 부동 원소 없 음2비 IE 하 폐 합 부동 원소3완전 폐쇄 요소Super simple clearing floats

Float left

이 층 왼쪽 유동

.columnleft{ float:left; width:20%; padding:10px;}

Float right

이 층 은 오른쪽 으로 움 직 이 고 아래 는 완전한 CSS 입 니 다.이것 은 외곽 wrap 입 니 다.three 층 응용overflow:auto;가height:1%;닫 힌 유동 모델.외곽 용 기 는 정상적으로 연장 할 수 있다.IE 6.0,Firefox 1.5,Opera 9.0 이 모두 테스트 를 통과 했다.

 #wrap_three{ border:6px #ccc solid; overflow:auto; _height:1%;} .column_left{ float:left; width:20%; padding:10px;} .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}

[Ctrl+A 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]

폐 합 부동 원소 슈퍼 간단 한 방법

Float left

Float right

좋은 웹페이지 즐겨찾기