1. float이란
요소의 <a href="http://www.php.cn/wiki/%20919.html" target="_blank">float<code><a href="http://www.php.cn/wiki/919.html" target="_blank">float</a> 속성이 none가 아닌 경우 float가 생성됩니다.
<p class="float">float</p>
로그인 후 복사
.float {
float: left;
width: 100px;
height: 100px;
background-color: #ddd;
}로그인 후 복사
2. 플로팅의 영향
플로팅으로 인해 요소가 문서 흐름에서 벗어나게 됩니다.
-
부모 요소는 크게 축소되어 있습니다. 즉, 부동 요소를 포함하지 않습니다.
예를 들어 위 코드는
상위 요소가 크게 접혀 있습니다.
-
텍스트 줄 바꿈으로 표시됩니다. .
텍스트 줄바꿈 효과
.normal 요소의 너비가 .float 요소를 덮는 것을 확인할 수 있습니다. 그러나 .float 요소 아래에는 텍스트가 없습니다. 이는 텍스트가 "압축"되어 있음을 의미합니다. 이는 문서 흐름에서 벗어나더라도 텍스트 흐름에서는 벗어나지 않기 때문입니다. 이 효과는 float 속성의 원래 의도이기도 합니다. 코드는 다음과 같습니다.
<p class="float">float</p>
正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素
로그인 후 복사
body {
background-color: #ccc;
}
.float {
float: left;
width: 100px;
height: 100px;
background-color: #ddd;
}
.normal {
background-color: #fff;
}로그인 후 복사
플로팅 요소의 여백은 병합되지 않습니다.
여백 병합 관련 내용을 보려면 여기를 클릭하세요.
요소가 부동되면 인라인 블록 요소, 즉 <a href="http://www.php.cn/wiki/927%EC%9D%B4%20%EB%90%A9%EB%8B%88%EB%8B%A4.%20.html" target="_blank">디스플레이<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: inline-block: 인라인 블록.
3. 플로팅 애플리케이션
위에서 언급한 텍스트 래핑.
-
왼쪽과 오른쪽의 너비가 고정되고 가운데가 적응형인 3열 레이아웃을 작성합니다.
<body>
<p class="left float">left</p>
<p class="right float">right</p>
<p class="mid">自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
</body>
로그인 후 복사
여기서 의도적으로 margin 값을 추가했는데 효과를 볼 수 있습니다.
3열 레이아웃
body도 .mid의 margin과 함께 떨어집니다. 이는 앞서 소개한 마진 병합으로 설명할 수 있습니다.
ps: 처음 이 3열 레이아웃을 작성할 때 html은 이렇게 작성했습니다.
body {
background-color: #ccc;
}
.float {
float: left;
width: 100px;
height: 100px;
background-color: #ddd;
}
.left {
float: left;
}
.right {
float: right;
}
.mid {
height: 100px;
background-color: #fff;
margin: 200px; /*故意加上了上下 margin 值*/
}로그인 후 복사
위와 같이 가운데 적응 요소를 가운데에 작성하는 것이 사실 더 논리적입니다. 하지만 이렇게 작성하면 .mid 요소가 블록 수준 요소이므로 오른쪽 요소가 아래로 떨어지며 .left는 아래로 떨어지지 않습니다. 원래는 문서 흐름 요소와 분리된 부동 소수점입니다.
Clear on child elements
여기서는 의미 없는 태그를 생성하지 않는 메서드만 작성합니다.
BFC(블록
For
matting Context), 즉 블록 수준 서식에서 지워집니다. context, 공식 설명 예:
부동,
절대 위치 요소(<a href="http://www.php.cn/wiki/902.%20html" target=" _blank">위치</a><a href="http://www.php.cn/code/6074.html" target="_blank"></a>는 또는 <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>), 인라인 블록 요소absolute, fixed테이블display:inline-block셀, 테이블 제목입니다. 및 <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow<code>display:table-cell 속성 값이 display:table-caption가 아닌 요소(예외 값이 뷰포트<a href="http://www.php.cn/css/css-rwd-viewport.html" target="_blank">뷰포트<code><a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>에 전파됩니다. )은 새로운 블록 수준 서식 컨텍스트를 생성합니다. visible<a href="http://www.php.cn/css/css-rwd-viewport.html" target="_blank">viewport</a>
요약하면 다음 조건 중 하나를 충족해야 합니다.
- 아님
floatnone
- 은
<a href="http://www.php.cn/wiki/188.html" target="_blank">정적<p></p></a> 또는 position
display은 table-cell, table-caption, inline-block, flex, inline-flex
overflow용이 아닙니다. for visible
위 속성 중 하나를 상위 요소에 추가하여 조건을 충족하는 한, 즉 상위 요소에 BFC를 추가하면 자식 요소.
위 내용은 CSS 부동 및 부동 지우기(BFC) 간단한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
