차례:
비디오: CSS 수업 - float 1 2024
단락 및 기타 블록 수준 요소는 CSS3에서 잘 정의 된 기본 동작을 갖습니다. 그들은 페이지의 전체 너비를 취하고 다음 요소는 아래에 나타납니다. 단락에 요소를 적용하면 해당 단락의 동작은 많이 변경되지 않지만 후속 단락의 동작이 변경됩니다.
세 단락으로 구성된 페이지를 살펴보십시오. 2 단락의 float 속성은 left로 설정됩니다.
보시다시피 이상한 형식이 있습니다. 진행 상황을 살펴보십시오.
-
단락에 테두리가 추가되었습니다. 보시다시피, 요소의 너비는 내용을 보면 항상 분명하지는 않습니다. float으로 어지럼증 할 때 문단에 테두리를 추가하여 진행 상황을 볼 수 있습니다. 테두리가 제대로 작동하면 언제든지 테두리를 제거 할 수 있습니다.
-
첫 단락은 정상적으로 작동합니다. 첫 번째 단락은 모든 블록 스타일 요소에서 볼 수있는 것과 동일한 동작을가집니다. 그것은 페이지의 전체 너비를 취하고 다음 요소는 그 아래에 배치됩니다.
-
두 번째 단락은 꽤 정상입니다. 두 번째 단락의 float 속성은 left로 설정됩니다. 단락은 일반 위치에 배치되지만 다른 텍스트는이 요소의 오른쪽에 배치됩니다.
-
세 번째 단락은 마른 것처럼 보입니다. 세 번째 단락은 두 번째 단락을 둘러싸고있는 것처럼 보이지만 텍스트는 오른쪽으로 밀려납니다. 이전 단락의 float 매개 변수는 나머지 공간 (현재는 많지 않음)에 배치합니다. 나머지 공간은 오른쪽에 있고 결국 두 번째 단락 아래에 있습니다.
이 코드를 생성하는 코드는 단순한 HTML이며
floatDemo p {border: 2px black solid;}와 똑같이 단순한 CSS 마크 업을 사용합니다. float {float: left;}
Float Demo
Paragraph 1.이 단락은 블록 레벨 요소의 정상적인 동작을합니다. 페이지의 전체 너비를 차지하고 다음 요소는 아래에 배치됩니다.
제 2 항.이 단락은 왼쪽으로 뜬다. 왼쪽에 배치되고 다음 요소는 오른쪽에 배치됩니다.
단락 3.이 단락에는 부동, 너비 또는 여백이 없습니다. float 요소의 오른쪽에있는 모든 공간을 취한 다음 다음 행으로 이동합니다.
코드에서 알 수 있듯이 float 속성을 left로 설정하여 floated라는 간단한 클래스가 있습니다. 단락은 일반적인 방법으로 정의됩니다. 2 단락이 스크린 샷의 3 단락 안에 삽입 된 것처럼 보이지만, 코드는 이것이 사실이 아니라는 것을 분명히 보여줍니다.두 단락은 완전히 별개입니다.
