경험 공유: CSS 부동 속성 float에 대한 자세한 설명

위 기사에서 우리는 float의 기본 속성에 대해 자세히 이해했습니다. 이제 float를 사용하는 방법에 대해 이야기하고 가장 고전적인 사례를 공유하겠습니다. [추천 도서: 프론트엔드 플로트를 어떻게 사용하나요? float 속성에 대한 자세한 설명]

CSS 스타일에서는 float 속성이 가장 좋습니다. 다양한 부동 속성을 사용하여 div 요소를 배치하여 원하는 효과를 얻을 수 있습니다. float 속성은 상자와 상자 안의 내용을 제어하는 ​​것입니다. . CSS에서는 모든 요소가 부동될 수 있습니다.

사례 공유:

위 그림에서는 2개의 div 모듈을 정의했는데, 하나는 큰 모듈이고 다른 하나는 작은 모듈입니다. 편의상 각 모듈에 색상을 추가하여 쉽게 구분할 수 있도록 했습니다. . , 웹 페이지의 배경색에 색상을 추가하고 각 div에 특정 여백을 설정합니다.

두 모듈 모두에 float가 설정된 경우 div는 블록 수준 요소이므로 각 요소는 서로 독립적이며 각 상자는 자유롭고 위에서 아래로 자유롭게 배열됩니다.

1. 첫 번째 div를 부동으로 설정했습니다

코드는 다음과 같습니다.

#son1
{
    /*这里设置son1的浮动方式*/
    float:left;
}

위 코드 분석:

상자를 왼쪽으로 부동으로 설정했으므로 첫 번째 상자도 부동 요소입니다. 따라서 첫 번째 상자의 너비는 더 이상 확장되지 않고 너비도 최소 너비이며 두 번째 상자도 첫 번째 상자를 따릅니다.

2. 두 번째 상자를 float로 설정합니다

#son2
{
    /*这里设置son2的浮动方式*/
    float:left;
}

위 코드에서 두 번째 상자는 부동 요소가 되고 첫 번째 상자에 인접하므로 너비가 확장되지 않습니다. 그림에 표시된 대로:

그러나 많은 사람들은 왜 첫 번째 상자와 두 번째 상자 사이에 일정한 거리가 있는지 궁금해할 것입니다. 실제로 두 상자 모두 CSS 스타일로 설정했습니다. 상자 1이 부동 개체인 경우 상자 2에는 부동 요소가 없습니다. 두 상자가 동시에 부동 요소인 경우 중간에 부동 요소에 의해 결정되는 특정 간격이 있습니다.

위 내용은 경험 공유입니다. CSS 부동 속성 float에 대한 자세한 소개입니다. Html5 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 경험 공유: CSS 부동 속성 float에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!