CSS 레이아웃 - float 예제
- 이전 페이지 CSS清除浮动
- 다음 페이지 CSS inline-block
이 페이지는 일반적인 플로팅 예제를 제공합니다.
그리드 / 동일한 너비의 상자
사용하여 float 속성을 사용하여 쉽게 나열된 플로팅 박스를 만들 수 있습니다:
实例
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* 세 개의 상자(네 개의 상자는 25%, 두 개의 상자는 50% 이상 이렇게 계산됩니다) */
padding: 50px; /* 이미지 사이에 간격을 더하고 싶을 때 */
}
box-sizing이 무엇인가요?
셋 세 개의 플로팅 박스를 쉽게 나열할 수 있습니다. 그러나 각 박스의 너비를 확장하기 위해 내용을 추가할 때(예: 패딩이나 테두리), 이 박스가 손상됩니다. box-sizing 속성은 박스의 총 너비(높이 포함)에 내부 패딩과 테두리를 포함시켜 패딩이 박스 안에 남아서 퍼지지 않도록 보장합니다.
우리의 CSS Box Sizing 이 장에서 box-sizing 속성에 대해 더 많은 것을 배울 수 있습니다.
이미지 나열
이와 같은 상자 그리드(The grid of boxes)는 이미지를 나열하기도 사용될 수 있습니다:
实例
.img-container {
float: left;
width: 33.33%; /* 세 개의 상자(네 개의 상자는 25%, 두 개의 상자는 50% 이상 이렇게 계산됩니다) */
padding: 5px; /* 이미지 사이에 간격을 더하고 싶을 때 */
}
동일한 너비의 상자
예제에서는 동일한 너비로 나열된 플로팅 박스를 배웠습니다. 그러나 동일한 높이를 가진 플로팅 박스를 만들기는 어렵습니다. 그러나 빠른 해결책은 고정된 높이를 설정하는 것입니다. 예제를 보면 다음과 같습니다:
Box 1
Some content, some content, some content
Box 2
Some content, some content, some content
Some content, some content, some content
Some content, some content, some content
实例
.box {
height: 500px;
}
그러나 이렇게 하면 유연성을 잃습니다. 블록에 항상 같은 양의 내용이 있을 것이라고 보장할 수 있다면 그렇습니다. 그러나 많은 경우 내용은 다릅니다. 모바일에서 이 예제를 시도하면 두 번째 블록의 내용이 블록 밖으로 표시된 것을 볼 수 있습니다. 이는 CSS3 Flexbox가 적용될 수 있는 장소입니다 -因为它可以自动拉伸框使其与最长的框一样长：
实例
Flexbox를 사용하여 유연한 프레임을 만듭니다:
Flexbox의 유일한 문제는 인터넷 익스플로러 10 또는 이전 버전에서 작동하지 않는다는 것입니다. 우리의 CSS Flexbox 챕터에서 Flexbox 레이아웃 모듈에 대한 더 많은 지식을 배울 수 있습니다.
웹 레이아웃 예제
사용 float 속성이 전체 웹 레이아웃을 완성하는 것도 흔합니다:
实例
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
更多实例
- 경계선과 외간격이 있는 이미지를 단락의 오른쪽으로 플로팅합니다
- 이미지를 단락의 오른쪽으로 플로팅하고, 이미지에 경계선과 외간격을 추가합니다.
- 제목이 있는 이미지를 오른쪽으로 플로팅합니다
- 제목이 있는 이미지를 오른쪽으로 플로팅합니다.
- 단락의 첫 번째 글자를 왼쪽으로 플로팅합니다
- 단락의 첫 번째 글자를 왼쪽으로 플로팅하고 그 글자의 스타일을 설정합니다.
- 플로팅을 사용하여 웹사이트를 만듭니다
- 플로팅을 사용하여 수평 네비게이션 바, 헤더, 푸터, 왼쪽 네비게이션 바 및 주요 내용을 포함한 홈페이지를 만듭니다.
모든 CSS 플로팅 속성
| 속성 | 설명 |
|---|---|
| box-sizing | 요소의 너비와 높이 계산 방식을 정의합니다: 그것이 내간격과 경계선을 포함해야 하는지 여부입니다. |
| clear | 삭제된 요소의 옆에 어떤 요소가 float될 수 있는지 그리고 어느쪽에 float될지 지정합니다. |
| float | 요소가 어떻게 float되는지 지정합니다. |
| overflow | 오버플로우가 발생할 경우 어떻게 처리할지 지정합니다. |
| overflow-x | 오버플로우 요소의 내용 영역이 넘칠 때 어떻게 처리할지 지정합니다. |
| overflow-y | 오버플로우 요소의 내용 영역이 넘칠 때 어떻게 처리할지 지정합니다. |
- 이전 페이지 CSS清除浮动
- 다음 페이지 CSS inline-block
