>  기사  >  웹 프론트엔드  >  CSS float의 속성은 무엇입니까?

CSS float의 속성은 무엇입니까?

青灯夜游
青灯夜游원래의
2020-12-15 13:48:405620검색

CSS 부동 속성은 상자(요소)가 부동해야 하는지 여부를 지정하고 부동 방향을 정의하는 데 사용되는 "float" 속성을 참조합니다. 요소가 float 속성을 사용한 후에는 해당 요소가 표준 흐름 자체에서 분리되어 다른 요소 위에 떠 있을 수 있으므로 원래 요소에 속한 공간을 더 이상 차지하지 않습니다.

CSS float의 속성은 무엇입니까?

이 문서의 운영 환경: Windows 10 시스템, CSS3 버전, Dell G3 컴퓨터.

1. 페이지 레이아웃 방법

페이지 레이아웃 방법에는 주로 문서 흐름, 플로팅 레이어 및 플로트 속성이 포함됩니다.

1.1 문서 흐름

HTML 페이지의 표준 문서 흐름(기본 레이아웃)은 위에서 아래로, 왼쪽에서 오른쪽으로, 블록(블록 수준 요소)을 만날 때 줄 바꿈입니다.

1.2 플로팅 레이어

플로팅 레이어: 요소의 float 속성에 값을 할당한 후 문서 흐름에서 분리되어 부모 요소의 왼쪽 및 오른쪽 테두리에 가깝게 왼쪽 및 오른쪽으로 떠 있습니다(기본값) 본문 텍스트 영역입니다).

플로팅 요소는 문서 흐름의 빈 위치에 있는 후속(비플로팅) 요소로 채워집니다. 범위가 플로팅 요소와 겹치면 플로팅 요소가 블록 수준을 덮습니다. 요소. 인라인 요소: 공백이 있으면 삽입합니다.

1.3 부동 속성 소개

float 속성: 상자(요소)가 부동할지 여부를 지정하는 데 사용되며 요소가 부동하는 방향을 정의할 수 있습니다.

요소가 float 속성을 사용한 후에는 요소가 표준 흐름 자체에서 분리되어 다른 요소 위에 떠 있을 수 있으므로 원래 요소에 속한 공간을 더 이상 차지하지 않습니다. 이로 인해 후속 요소가 위로 이동하여 차지하게 됩니다. 원래 요소의 공간에 속한 공간입니다.

참고: 절대 위치에 있는 요소는 부동 속성을 무시합니다!

속성값:

 ① 왼쪽: 요소가 왼쪽으로 떠다닙니다.

 ② 오른쪽: 요소가 오른쪽에 떠 있습니다.

  ③ 없음: 기본값입니다.

 inherit: 상위 요소로부터 float 속성을 상속받습니다.

1.4 예시

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>2.3-float属性</title>
    <style type="text/css">
        #a
        {
            background-color:Red;
            height:50px;
            width:100px;
        }
        #b
        {
            background-color:Yellow;    
            height:50px;
            width:200px;
        }
        #c
        {
            background-color:Blue;   
            height:50px;
            width:300px;
         }
         #d
         {
            background-color:Gray;
            height:50px;
            width:400px;
         }

    </style>
</head>
<body>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1"  />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>

(권장 튜토리얼: CSS 비디오 튜토리얼)

2. float:left

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

2.1 코드 변경

input2 추가: float:left

div-b 추가: float:left

div-d 추가: float:left

2.2 뒷면 보기 변경

 ① 브라우저 너비 " 길지 않다"

  ② 브라우저의 너비가 "충분히 길다"면

2.3 결론

현재 요소 분류(float:left) 블록 수준 요소(a)인라인 요소(b)인라인 요소(a)인라인 요소(b)

3.float:right

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

3.1 코드 변경

input2 요소: float:right

div-b 추가: float:right

div-d 추가: float:right

3.2 뒷면 보기 변경

 ① 브라우저 언제 너비가 "길지 않다"

  

  ② 브라우저 너비가 "길다"일 때

3.3 결론

다음 이웃 요소 분류(float 제외)

결론

블록 수준 요소(b)

b는 In에서 남은 부분을 채웁니다. 공간, a는 b와 겹치고 a의 레이어가 맨 위에 있습니다.

b는 즉시 a를 따릅니다. 그리고 자체 인라인 요소의 특성에 따라 래핑 여부를 결정합니다.

블록 수준 요소(b)

b는 a의 움직임을 따르지 않습니다.

b는 즉시 a를 따릅니다. 그리고 자체 인라인 요소의 특성에 따라 래핑 여부를 결정합니다.

현재 요소 분류(float : 오른쪽)

xxt-neighboring 요소 분류 (플로트 제외)

conclusion

Block-level 요소 (a)

블록 레벨 요소 (b)

B a가 b와 겹치면(상위 컨테이너의 너비가 줄어듦) a의 레이어가 맨 위에 있습니다.

인라인 요소(b)

b는 a가 남긴 공간을 채웁니다.

인라인 요소(a)

블록 수준 요소(b)

b는 a의 움직임을 따르지 않습니다.

인라인 요소(b)

b는 a가 남긴 공간을 채웁니다.

4. 인접 요소에는 부동 속성이 포함됩니다.

인라인 요소의 특성으로 인해 인라인 요소 및 블록 수준 요소에 인접한 부동 속성을 사용하지 않는 것이 가장 좋습니다.

다음은 블록 수준 요소의 예입니다.

기본 보기:

4.1 float:left

  Add float:left

4.1.1 view

  ①Browser 브라우저의 너비 이다 "길지 않다"

  

  ②브라우저의 너비가 "길지 않다"

  

4.1.2 결론

  Ⅰ 인접한 플로팅 요소, 가장 왼쪽에 있는 속성이 있는 요소는 가장 먼 쪽에서 순위가 ​​매겨집니다. 왼쪽.

 Ⅱ 플로팅 요소가 된 후 플로팅 레이어에 있는 인라인 요소의 "특성"을 갖습니다. 여러 개의 플로팅 요소가 한 행에 들어갈 수 없으면 래핑됩니다. "

  

4.2.2 결론

  Ⅰ 인접한 플로팅 요소 중 앞에 올바른 속성이 있는 요소가 맨 오른쪽에 순위가 매겨집니다.

 Ⅱ 플로팅 요소가 된 후 플로팅 레이어에 있는 인라인 요소의 "특성"을 갖습니다. 여러 개의 플로팅 요소가 한 행에 들어갈 수 없으면 래핑됩니다.

4.3 높이가 다른 블록 수준 요소

div-a의 높이 값을 div-b보다 크게 설정하고 세 div 모두에 float:left를 추가합니다.

4.3.1 View

  ①Browser The 너비는 "충분히 길다"

  

  ②브라우저 너비가 줄어들 때

  

  3브라우저 너비가 더 줄어들 때

  

4.3.2 결론

  Ⅰ 높이가 다른 div 플로팅 요소를 정렬할 때, 인라인 요소의 "특성"에 따라 여러 부동 요소가 한 행에 들어갈 수 없으면 래핑됩니다.

4.3.3 브라우저 너비 감소 및 변형 문제 해결

  div에 float 속성이 있는 div 요소를 포함하고 이 div에 너비 및 높이 속성을 추가합니다. 브라우저 너비를 줄여도 변형되지 않습니다.

  

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개

를 방문하세요! !

위 내용은 CSS float의 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.