CSS의 부동 속성에 대한 간략한 소개

CSS의 floatfloating 속성을 소개하려면 먼저 표준 문서 흐름

표준 문서 흐름을 이해해야 합니다.

CSS의 개입 없이 블록 수준 요소는 한 줄만 차지하며, 너비를 높이로 설정할 수 있으며 인라인 요소가 나란히 표시되며 너비와 높이가 자동으로 채워집니다.

HTML 페이지의 표준 문서 흐름(기본 레이아웃)은 위에서 아래로, 왼쪽에서 오른쪽으로, 블록(블록 수준 요소)이 나타나면 줄 바꿈이 포함됩니다.

float 속성의 초기 사용은 대상 콘텐츠를 텍스트로 감싸는 것이었고, 이는 신문에서 흔히 볼 수 있듯이, 나중에는 주로 콘텐츠를 수평으로 나란히 배열하는 데 사용되었습니다.

Floating. 레이어: 요소의 float 속성에 값을 지정한 후 문서 흐름에서 분리되어 상위 요소의 왼쪽 및 오른쪽 테두리에 가깝게 왼쪽 및 오른쪽으로 떠 있습니다(기본값은 본문 텍스트 영역).

float의 속성 소개:

left: 요소가 왼쪽으로 떠 있습니다.

right : 요소가 오른쪽으로 떠있습니다.

플로팅의 특징:

【1】자식의 플로팅으로 인해 부모의 높이가 무너집니다. 해결 방법: 1. 부모에 높이를 다시 추가합니다. 2. overflow 사용: 숨김

【2 】플로팅 래핑:

블록 수준 요소: 콘텐츠 영역으로 래핑되어 더 이상 전체 줄을 차지하지 않지만 여전히 콘텐츠 길이와 일치하는 길이를 가지며, 본문은 여전히 ​​블록 수준 요소입니다.

인라인 요소: 부동 소수점을 설정한 후 display 속성이 변경되어 블록 수준 요소가 되며 너비와 높이를 설정할 수 있습니다.

【3】플로팅 요소는 padding 영역

을 통과하지 못합니다.【4】플로팅 요소는 문서 흐름에서 벗어나 다른 요소에 영향을 줍니다.

위 내용은 CSS의 부동 속성에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!