float : The clearfix Hack(clearfix 해킹)

컴프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 1806 1806

요소가 포함 된 요소보다 크고 떠 다니면 해당 요소가 컨테이너 외부로 넘칠 것입니다.

그런 다음 overflow: auto;이 요소를 포함하여이 문제를 해결할 수 있습니다.

예

.clearfix {

overflow: auto;

}

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 3px solid #73AD21;

}

.img1 {

float: right;

}

.clearfix {

overflow: auto;

}

.img2 {

float: right;

}

</style>

</head>

<body>

<p>In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

<p style="clear:right">Add a clearfix class with overflow: auto; to the containing element, to fix this problem:</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
707	CSS	ios 에서 input 스타일 초기화 [5]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	12405
706	기타	modern.ie 일종의 ie 테스터? [2]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5101
705	CSS	웹표준코딩에 필요한 지식 참고하세요. [5]	접신 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5677
704	기타	크로스브라우징? 이제 크롬에서 하나로 확인하자 [18]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	12113
703	웹접근성	자바스크립트를 끈 로그인 폼 [15]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	10093
702	기타	HTML5 기반 에니메이션 제작을 위한 Adobe Edge [3]	흥힝힝 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5151
701	CSS	IE6/7 img px 버그	daro 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3118
700	반응형	참고해서 만들어 본 반응형 레이아웃 [7]	kiplayer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	6806
699	CSS	팁은 아닌데 그냥 제가 자주쓰는 버튼 css [5]	kiplayer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	6429
698	웹접근성	html / css 버튼 만들어 주는 사이트. 자주 활용합니다^^; 편리성 [9]	돼지코구뇽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	36936
697	HTML	IE6 PNG 초 간단하게 적용 [3]	daro 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4345
696	HTML	HTML5 placeholder 사용하기 [1]	daro 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	8079
695	CSS	제가 사용하는 CSS RESET (초기화) [3]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5456
694	HTML	<img> 태그 올 바르게 사용하기. [8]	daro 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5821
693	CSS	모바일/테블릿의 @font-face 지원여부 [2]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3895
692	웹접근성	웹접근성이란? [3]	프로프리랜서 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3787
691	웹접근성	웹표준형 화면 확대/축소 [8]	돼지코구뇽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	12473
690	CSS	익스플로러에서 CSS3의 컬러속성을 필터로 사용하도록 변경해주는 사이트	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4226
689	웹접근성	접근성을 고려한, 컨텐츠를 가리는 방법 [4]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	5878
688	CSS	그라디언트 에디터 [7]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4931
687	HTML	파비콘(favicon) 만들어 넣기 [2]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	7389
686	CSS	css를 이용한 2차 메뉴입니다. [7]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	5849
685	기타	고수님들 사이트오류(레이어팝업) 좀 봐주세요 ㅠ.ㅠ [4]	황후인덕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	10616
684	HTML	object 태그 질문 드ㅡ립니다 [2]	후라보노보노 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4813
683	HTML	[HTML5] classList api 클래스 변경 api [1]	다프린 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4345
682	기타	필요에 따라 자스/css 불러왔다 내보내기 [3]	Maximus 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3523
681	CSS	가상클래스 순서 외우기 [3]	모노폴리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3672
680	HTML	넌 이제 오빠꺼야, embed 동영상 위의 div 표시문제 [8]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	6315
679	반응형	반응형웹 패턴/리소스/뉴스 [4]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	6596
678	CSS	CSS에 attr 함수에 대해 [3]	다프린 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3821