CSS float 속성을 사용하여 부동 요소를 설정하는 방법 소개

부동 상자는 바깥쪽 가장자리가 포함 상자나 다른 부동 상자의 테두리에 닿을 때까지 왼쪽이나 오른쪽으로 이동할 수 있습니다.

플로팅된 상자가 문서의 일반 흐름에 포함되지 않기 때문에 문서의 일반 흐름에 있는 블록은 플로팅된 상자가 존재하지 않는 것처럼 동작합니다.

플로트 효과 표시
기본 설정

일반적으로 웹 페이지에 3p 컬러 블록 추가:

HTML 코드:

<p class="p1">
    p1   
</p>
<p class="p2">
    p2   
</p>
<p class="p3">
    p3   
</p>

몇 가지 크기와 색상을 설정하기만 하면 됩니다.

CSS 코드:

.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
}   
.p2 {   
    width: 100px;   
    height: 100px;   
    background-color: skyblue;   
}   
.p3 {   
    width: 100px;   
    height: 100px;   
    background-color: green;   
}

효과는 다음과 같습니다.

일반적인 상황에서는 3개의 p가 위에서 아래로 정렬됩니다.

다음으로 float 속성을 사용하여 값을 올바르게 설정합니다.

p1 태그에 float 속성을 추가합니다

.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
    float: rightright;   
}

효과는 다음과 같습니다:

p1이 화면 오른쪽으로 실행되는 것을 확인할 수 있습니다. 오른쪽으로 뜹니다.

동시에 세 개의 p에 대해 float 설정: left

.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
    float: left;   
}   
.p2 {   
    width: 100px;   
    height: 100px;   
    background-color: skyblue;   
    float: left;   
}   
.p3 {   
    width: 100px;   
    height: 100px;   
    background-color: green;   
    float: left;   
}

효과는 다음과 같습니다:

세 개의 p가 모두 왼쪽으로 부동하도록 설정된 후 이 가로 레이아웃을 얻을 수 있습니다.

CSS 코드(p1의 높이와 p2의 너비)를 다음과 같이 수정합니다.

.p1 {   
    width: 100px;   
    height: 130px;   
    background-color: cyan;   
    float: left;   
}   
.p2 {   
    width: 300px;   
    height: 100px;   
    background-color: skyblue;   
    float: left;   
}   
.p3 {   
    width: 100px;   
    height: 100px;   
    background-color: green;   
    float: left;   
}

효과 표시:

p2가 충분히 넓고 p3가 한 행에 들어갈 수 없는 경우 p3는 자동으로 다음에서 레이아웃을 시작합니다. 두 번째 행. 하지만 p1의 키가 조금 더 크므로 p3은 처음부터 시작하지 않고 p1 뒤에서 정렬됩니다.

플로트를 지우려면 오버플로를 사용하세요
예:

.overflow-clear-float {overflow:hidden;}

또는

overflow-clear-float {overflow:auto;}

오버플로 스타일 값이 non-visilbe인 경우 CSS 2.1 사양에 정의된 블록 형식 지정 컨텍스트가 실제로 생성됩니다. 이를 생성한 요소는 정확한 높이를 얻기 위해 내부 요소 위치를 다시 계산합니다. 이러한 방식으로 상위 컨테이너에는 부동 요소의 높이도 포함됩니다. 이 용어는 너무 모호하여 CSS 3 초안에서 루트 흐름이라는 용어로 변경되었습니다. 이름에서 알 수 있듯이 이 레이아웃 흐름은 독립적이며 외부 요소에 영향을 주지 않습니다. 실제로 이 기능은 초기 IE의 hasLayout 기능과 매우 유사합니다.
호환성 문제에 대한 참고 사항:
블록 서식 컨텍스트 개념은 CSS 2.1 사양 내에서 제안되었습니다. 따라서 IE6/7에서는 지원되지 않습니다. 이는 이전 IE 버전이 CSS 1 사양 표준과 CSS 2.0 사양의 일부만 구현했기 때문입니다. IE 7에서는 오버플로 값이 표시되지 않을 때 hasLayout 속성이 트리거될 수 있습니다. 이는 또한 IE 7이 컨테이너에 부동 요소를 포함하도록 만들 수도 있습니다.

CSS에서 부동 요소를 설정하기 위해 float 속성을 사용하는 방법에 대한 자세한 내용은 PHP 중국어 웹사이트를 참고하세요!