CSS에서 float의 역할

CSS의 부동 속성을 사용하면 요소가 문서 흐름에서 벗어나 상위 요소의 가장자리를 따라 정렬되어 정렬된 텍스트 이미지, 부동 메뉴 사이드바 및 겹치는 요소를 만들 수 있습니다. 플로팅 요소의 속성값에는 left(왼쪽 플로트), 오른쪽(오른쪽 플로트), 없음(클리어 플로트), 상속(상속)이 포함됩니다. 부동 요소로 인해 상위 요소가 오버플로되는 것을 방지하려면 Clearfix 기술을 사용하여 빈 요소를 추가하고 부동 요소를 지울 수 있습니다.

CSS에서 float의 역할

float는 페이지에서 요소의 위치를 ​​제어하는 ​​데 사용되는 CSS의 중요한 속성입니다. 이를 통해 요소는 일반적인 문서 흐름에서 벗어나 상위 요소의 가장자리(왼쪽 또는 오른쪽)를 따라 정렬됩니다.

플로트 작동 방식

요소가 플로팅되면 문서 흐름에서 제거되고 상위 요소의 가장자리에 배치됩니다. 부동 요소는 다른 부동 요소나 컨테이너 경계를 만날 때까지 사용 가능한 수평 공간을 차지합니다.

float 사용

float 속성은 다음 목적으로 사용할 수 있습니다.

• 나란한 열 만들기
• 텍스트 또는 이미지 정렬
• 플로팅 메뉴 또는 사이드바 만들기
• 겹치는 요소 만들기

float의 속성 값

float 속성에는 다음과 같은 속성 값이 있습니다.

• left: 부모 요소의 왼쪽에 요소를 띄웁니다.
• right: 부모 요소의 오른쪽에 요소를 띄웁니다.
• none: float 지우기, 요소가 문서 흐름에서 정상적으로 흐르도록 허용
• inherit: 부모 요소에서 float 값 상속

float 지우기

Floated 요소로 인해 부모 요소가 다음과 같이 될 수 있습니다. 과다. 이를 방지하기 위해 Clearfix 기술을 사용하여 플로트를 지울 수 있습니다. 일반적인 접근 방식은 다음 CSS 코드를 사용하는 것입니다.

<code class="css">.clearfix:after {
  content: "";
  display: table;
  clear: both;
}</code>

이렇게 하면 상위 요소에 Clear:both 속성이 있는 빈 요소가 추가되어 부동 소수점이 지워지고 오버플로가 방지됩니다.

위 내용은 CSS에서 float의 역할의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!