float : The clear Property(clear 속성)

컴프

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

· 8년 전 · 조회 1492 1492

The clear Property(clear 속성)

이 clear속성은 부동 요소의 동작을 제어하는 데 사용됩니다.

떠 다니는 요소 뒤에있는 요소는 그 주위로 흐를 것입니다. 이를 피하려면 clear속성을 사용하십시오 .

이 clear속성은 요소의 어느면에 부동 요소가 뜨도록 허용되지 않는지 지정합니다.

Example

div {

clear: left;

}

<!DOCTYPE html>

<html>

<head>

<style>

.div1 {

float: left;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid #73AD21;

}

.div2 {

border: 1px solid red;

}

.div3 {

float: left;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid #73AD21;

}

.div4 {

border: 1px solid red;

clear: left;

}

</style>

</head>

<body>

<h2>Without clear</h2>

<div class="div2">div2 - Notice that the div2 element is after div1, in the HTML code. However, since div1 is floated to the left, this happens: the text in div2 is floated around div1, and div2 surrounds the whole thing.</div>

<h2>Using clear</h2>

<div class="div4">div4 - Using clear moves div4 down below the floated div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>

</html>

댓글 작성

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

로그인하기

게시판 목록

퍼블리셔팁

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
107	HTML	cart클래스1	홀로남은자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3333
106	HTML	비교 복사 [1]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3215
105	HTML	싸이월드 둥근 테두리 만드는 방법 [2]	그레이스웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4944
104	HTML	페인트 브러시 툴(Paintbrush Tool, 단축키 - B)	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6286
103	HTML	올가미 툴(Lasso Tool, 단축키 - L)	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5262
102	HTML	포토샵 레이어의 이해 [2]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4621
101	HTML	점선 그리는 법... [2]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3435
100	HTML	일러스트 단축키2	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6186
99	HTML	스타일 시트로 마우스 오버와 아웃시 바뀌는 색깔	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5018
98	HTML	XP서비스팩2 무시하고 새창 띄우기	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3441
97	HTML	개행문자 없애기[펌] [1]	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4437
96	HTML	우체국- 해외발송 구역 및 나라구분 (우편번호와 비슷)	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6874
95	HTML	이미지(img)를 이용한 백그라운드 통신	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4331
94	HTML	[JavaScript] 익스플로러,네츠케이프 모두에서 iframe 과 비슷하게 해보자!	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3215
93	HTML	웹 폰트 적용 시키기 - 초보자용 -	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5755
92	HTML	페이지 자동 이동 방법 3가지!!!	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4147
91	HTML	body옆의 스크롤바흔적없애기 [1]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5175
90	HTML	마우스 오른쪽 버튼 사용금지	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3236
89	HTML	마우스 룰오버시 여러가지 효과내기	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3159
88	HTML	포토샾 팁 72가지 [1]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3625
87	HTML	업로드시 중복 파일명 체크및 새로운 이름 생성 [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5161
86	HTML	디렉토리 이미지 뷰어 [18]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4807
85	HTML	GD와 GifSicle을 이용한 animationGIF 생성하기 [4]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4136
84	HTML	PHP 한글 메뉴얼[Professional HTML Preprocessor]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3491
83	HTML	register_global=off 일때 파일 업로드 방법	빨간망토의비밀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3147
82	HTML	디렉토리 용량 체크 (윈도우 리눅스 공용) [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4912
81	HTML	password() 의 함수로 암호화한 스크립트를 복호화 할수 없습니다.!! [1]	damoa.biz 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4128
80	HTML	insertRow,insertCell,createElement,innerHTML [2]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4447
79	HTML	디렉토리별 용량체크 (Linux server) [3]	가을 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3580
78	HTML	[영문] Ajax 사이트 한곳 더 소개 합니다~! [1]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4916