float 속성은 요소가 떠할지 여부를 지정합니다.
clear 특성은 부유 요소의 동작을 제어하기 위해 사용된다.
플로트 속성
단순한 사용에있어서, float 특성은 이미지가 텍스트를 랩 어라운드 할 수있다.
다음의 예는 이미지가 텍스트에서 오른쪽으로 떠하도록 지정합니다 :
clear 부동산
clear 특성은 부유 요소의 동작을 제어하기 위해 사용된다.
부동 요소 다음 요소는 주위에 흐를 것이다. 이 문제를 방지하려면 사용 clear 속성을.
clear 속성이있는 요소를 떠 요소의 측면 부유 할 수 없습니다 지정
clearfix Hack - overflow: auto;
요소가 포함 된 소자보다 키이며, 플로팅되는 경우, 그 용기의 외부 범람한다.
그 다음 우리는 추가 할 수 overflow: auto; 포함하는 요소에이 문제를 해결하기 위해 :
웹 레이아웃 예
사용하여 전체 웹 레이아웃을 수행하는 것이 일반적이다 float 속성을 :
예
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
} »그것을 자신을 시도 
더 예
단락의 오른쪽 수레 테두리와 여백 이미지
단락의 오른쪽에 이미지 플로트하자. 이미지에 테두리와 여백을 추가합니다.
오른쪽에 수레 캡션과 이미지
오른쪽에 캡션 플로트로 이미지를 보자.
왼쪽에 단락 부동의 첫 글자를 보자
왼쪽에 단락 부동의 첫 글자를 보자 편지를 스타일.
수평 메뉴 만들기
수평 메뉴를 만들 하이퍼 링크의 목록 플로트를 사용합니다.
테이블없이 홈페이지 만들기
머리글, 바닥 글 왼쪽 내용과 주요 내용으로 홈페이지를 제작하는 플로트를 사용합니다.
모든 CSS 플로트 등록
| 재산 | 기술 |
|---|---|
| clear | 부동 요소가 부유 할 수 없습니다 요소의 어떤면에 지정 |
| float | 요소가 부유할지 여부를 지정 |
| overflow | 내용 요소의 상자를 오버 플로우하는 경우 수행되는 작업을 지정합니다 |
| overflow-x | 이 요소의 컨텐츠 영역을 오버 플로우하는 경우 내용의 왼쪽 / 오른쪽 가장자리로 무엇을 지정합니다 |
| overflow-y | 이 요소의 컨텐츠 영역을 오버 플로우하는 경우 콘텐츠의 위 / 아래 가장자리 무엇을 지정합니다 |