CSS 플로팅에 대한 자세한 소개
- 高洛峰원래의
- 2017-03-20 16:11:311888검색
1. 표준 흐름은 브라우저의 기본 레이아웃으로 위에서 아래로, 왼쪽에서 오른쪽으로 기본 일정 레이아웃이 설정됩니다.
2. 레이아웃 방법
2.1 플로팅의 본질: 그림과 텍스트의 서식 문제를 나란히 해결합니다.
*요소가 부동된 후에는 표준 흐름에서 벗어나 레이아웃에 영향을 미칩니다.
2.1.1 float 설정 전(before):
2.1.2. 이후(after)
* {
padding: 0;
margin: 0;
}
.box1 {
width: 50px;
height: 40px;
background-color: #AFEEEE;
border: 2px solid #3C3C3C;
float: left;
}
.box2 {
width: 300px;
height: 300px;
background-color: #ADFF2F;
border: 2px solid #3C3C3C;
}*플로팅 요소는 표준 흐름의 공간을 차지하지 않습니다. 그러나 이는 표준 스트림의 텍스트 형식에 영향을 미칩니다.
3.플로팅의 특징
3.1.플로팅은 표준흐름과 분리되어 위치를 차지하지 않으므로 표준흐름에 영향을 미친다. 부동은 왼쪽과 오른쪽에만 떠 있습니다.
3.2.플로팅 요소 A의 배열 위치는 이전 요소(블록 수준)와 관련됩니다. 이전 요소에 부동 소수점이 있는 경우 A 요소의 상단은 이전 요소의 상단에 정렬됩니다. 이전 요소가 표준 흐름이면 A 요소의 상단은 이전 요소의 하단에 정렬됩니다. .
3.3.상위 상자의 하위 상자 중 하나가 플로팅된 경우, 한 줄에 정렬되어 표시되도록 하려면 다른 하위 상자도 플로트되어야 합니다.
3.4.Float는 요소의 쓰기 위치에 따라 해당 float를 표시합니다.
3.5. 요소가 플로팅된 후 너비와 높이가 설정되지 않으면 해당 요소는 인라인 블록 요소의 특성을 갖게 됩니다. 요소의 크기는 정의된 크기나 기본 콘텐츠에 따라 전적으로 달라집니다. 즉, 요소가 래핑됩니다.
3.6. 플로팅은 파괴적입니다. 요소가 플로팅된 후 원래의 일반 흐름 레이아웃을 파괴하고 콘텐츠가 붕괴됩니다.
참고: 표준 흐름의 상위 상자가 높게 설정되지 않고 모든 하위 상자가 부동 상태인 경우 상위 상자의 높이는 0으로 축소됩니다.
4. 부동 파괴성에 의한 축소 문제
4.1.overflow방법: 오버플로 설정: 상위 상자에 숨겨짐(포장하도록 함)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>溢出处理案例</title>
<style>
.box1 {
/*滚动条随着需要而产生*/
height: 60px;
width: 60px;
overflow: auto;
float: left;
background-color: #5F9EA0;
}
.box2 {
height: 60px;
width: 60px;
overflow: hidden;
float: left;
background-color: #ADFF2F;
}
.box3 {
height: 60px;
width: 60px;
overflow: visible;
float: left;
background-color: #CCCCCC;
}
.box4 {
/*始终有滚动条*/
height: 160px;
width: 160px;
overflow: scroll;
float: right;
background-color: #FFC0CB;
}
</style>
</head>
<body>
<div class="box1">overflow:auto;**minking 的博客minking 的博客minking 的博客</div>
<hr />
<div class="box2">overflow: hidden;**minking 的博客minking 的博客minking 的博客</div>
<hr />
<div class="box3">overflow: visible;**minking 的博客minking 的博客minking 的博客</div>
<hr />
<div class="box4">overflow: scroll;**minking 的博客minking 的博客minking 的博客</div>
</body>
</html>
5. 보충: BFC
오버플로는 요소의 BFC를 트리거하여 요소가 독립적인 레이아웃 공간과 권한을 갖도록 허용합니다. 레이아웃, 모든 상위 요소에는 높이 축소 문제를 해결하는 원칙인 래핑 속성이 있습니다.
예: 플로팅은 bfc를 트리거할 수도 있으며 위치 지정, 오버플로, 디스플레이: 테이블, 테이블-셀...
6. 웹사이트 핵심 디스플레이 영역은 일반적으로 중앙에 표시됩니다. 너비는 960px 980px 1000px 1190px 1200px입니다.
7. 부동 지우기: 현재 요소의 왼쪽과 오른쪽에 부동 요소가 없는 경우에만 해당 요소가 표준 흐름에 표시됩니다.
************지우기: 왼쪽/오른쪽/모두
위 내용은 CSS 플로팅에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!