float : The clearfix Hack(clearfix 해킹)

컴프

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

· 8년 전 · 조회 1799 1799

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

그런 다음 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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
1037	CSS	skewX () 메서드 , skewY () 메서드, skew () 메서드	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1851
1036	CSS	scale () 메서드	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1165
1035	CSS	rotate () 메서드	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1372
1034	CSS	CSS3 2D변환 - translate() 메서드	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1347
1033	CSS	CSS3 단어 속보	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1569
1032	CSS	CSS3 워드 래핑	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1865
1031	CSS	css 굵은 글씨 사용	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2143
1030	CSS	css 원하는 글꼴 사용하기	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1798
1029	CSS	CSS3 웹 폰트 - @ font-face 규칙	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1799
1028	CSS	CSS3 텍스트 오버플로 세번째	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1676
1027	CSS	CSS3 텍스트 오버플로 두번째	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1466
1026	CSS	CSS3 상자 그림자 속성	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1432
1025	CSS	CSS3 그림자 효과 다섯번째	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1650
1024	CSS	CSS3 그림자 효과 네번째	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1687
1023	CSS	CSS3 그림자 효과 세번째	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1524
1022	CSS	CSS3 그림자 효과 두번째	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1444
1021	CSS	CSS3 그림자 효과	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2094
1020	CSS	CSS3 그라디언트 방사형 그라데이션 반복	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2170
1019	CSS	CSS3 그라디언트 다른 크기의 키워드 사용	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1571
1018	CSS	CSS3 그라디언트 모양 설정	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2067
1017	CSS	CSS3 방사형 그라디언트 - 다른 간격의 색상 정지	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1852
1016	CSS	CSS3 그라디언트 두번째	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1754
1015	CSS	CSS3 그라디언트	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2200
1014	CSS	CSS3 Colors	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1754
1013	CSS	CSS3 background-clip 속성	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1989
1012	CSS	CSS3 background-origin 속성	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2290
1011	CSS	css3 전체 크기 배경 이미지	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2241
1010	CSS	css3 여러 배경 이미지의 크기 정의	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1627
1009	CSS	CSS3 배경 크기	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1524
1008	CSS	CSS3 다중 배경	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1827