CSS 기본 지식 플로트에 대한 자세한 소개

얼마 전 CSS 기초지식의 입장에 대한 글을 쓴 적이 있는데, 당시 제가 float에 대해 이해하고 있는 부분이 그다지 정확하지 않다는 점을 MOOC.com에서 많은 독자님들께서 지적해 주셨는데요. 오해의 소지가 있었다면 사과드립니다.) 이제 나는 float에 대해 더 많이 배우고 나의 학습 경험을 여러분과 공유하겠습니다.

플로팅 기본 지식

플로팅에는 4가지 속성이 있습니다: 왼쪽(왼쪽 플로팅), 오른쪽(오른쪽 플로팅), 없음( 부동하지 않음), 상속(상속됨).

부동 요소의 포함 블록은 가장 가까운 블록 수준 조상입니다.

부동 요소는 외부 가장자리가 포함 블록의 내부 가장자리 또는 다른 부동 요소의 외부 가장자리에 닿을 때까지 왼쪽(또는 오른쪽)으로 오프셋됩니다.

플로팅 요소는 표준 문서 흐름에서 벗어났습니다. 텍스트 및 줄 수준 요소는 요소를 둘러싸지만 블록 수준 요소는 영향을 받지 않습니다.

비대체 요소를 부동화하는 경우 해당 요소에 대해 너비를 선언해야 합니다. 그렇지 않으면 요소의 너비가 0이 되는 경향이 있습니다.

플로팅 요소의 여백(margin)은 다른 요소의 여백과 병합되지 않습니다.

플로트에 대한 심층 연구

플로트 요소의 상단 가장자리 포함 요소보다 높을 수 없습니다. 이전에 생성된 블록 수준 요소 또는 블록의 행 수준 요소의 맨 위입니다.

플로팅 요소를 가로 방향으로 배치할 공간이 충분하지 않으면 공간이 충분하거나 더 이상 플로팅 요소가 없을 때까지 아래쪽으로 이동합니다.

부동 요소는 포함 블록의 왼쪽, 오른쪽 및 위쪽 경계를 오버플로할 수 없지만 아래쪽 경계만 오버플로할 수 있습니다. (플로팅 요소가 하위 경계를 넘으면 일부 브라우저에서는 플로팅 요소가 컨테이닝 블록에 포함될 수 있도록 컨테이닝 블록의 높이를 늘려서 공백이 커지므로 브라우저 호환성 문제가 발생합니다.)

플로팅 요소에 대한 부정적인 설정 여백을 사용할 때 플로팅 요소가 포함 블록을 오버플로하는 것처럼 보이지만 실제로는 위의 규칙을 위반하지 않습니다.

특수한 경우, 플로팅 요소가 포함 블록보다 넓은 경우 플로팅 요소가 오프셋 반대 방향으로 오버플로됩니다.

플로팅의 폐해

배경이 보이지 않습니다

테두리가 열리지 않습니다

여백 패딩을 올바르게 표시할 수 없습니다

Float를 지우는 방법

/* 方法1，当父包含块缩成一条时无效 */

.clear-float2{ overflow:hidden; width:100%; }   
/* 方法2，overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容，从而实现了清除浮动。 */

.clear-float3{ overflow: auto; zoom: 1; }   
/* 方法3，zoom是在处理兼容性问题，hidden和auto都能清除浮动，据说auto对seo更友好 */

중 하나 위의 CSS 기본 지식 float에 대한 자세한 설명은 모두 편집자가 공유한 내용이므로 참고가 되기를 바라며, PHP 중국어 사이트도 지원해 주시길 바랍니다.

위 내용은 CSS 기본 지식 플로트에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!