CSS 플로트 란 무엇입니까?

CSS float는 일반적인 표준 흐름 제어에서 요소를 만드는 방법입니다. 요소는 외부 경계가 상위 요소의 내부 경계 또는 다른 부동 요소의 외부 경계에 닿을 때까지 float 값에 따라 왼쪽이나 오른쪽으로 이동합니다. 지금까지 주변 요소도 재정렬되었습니다. 플로팅은 페이지에서 개체의 순서를 변경할 수 있는 매우 유용한 레이아웃 방법입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

CSS 플로트는 일반적인 표준 흐름 제어에서 요소를 가져와 왼쪽이나 오른쪽으로 이동하고 주변 요소를 재배열하는 방법입니다. Float는 이미지에 자주 사용되지만 레이아웃에도 매우 유용합니다.

플로팅은 페이지의 개체가 앞뒤로 흐르는 순서를 변경할 수 있는 매우 유용한 레이아웃 방법입니다. 콘텐츠의 레이아웃을 단순하게 만들고 확장성이 좋다는 장점이 있습니다.

플로팅은 CSS 레이아웃의 매우 강력한 레이아웃 기능이며 CSS 레이아웃을 이해하는 데 중요한 문제이기도 합니다. CSS에서는 div를 포함한 모든 요소가 플로팅 방식으로 표시될 수 있습니다.

Floating을 사용하면 부동 속성으로 설정된 요소가 표준 일반 흐름의 제어에서 벗어나 상위 요소의 지정된 위치로 이동할 수 있습니다.

floating 사용법:

기본 구문 형식:

选择器{float:属性值;}

• 왼쪽 요소가 왼쪽으로 뜹니다.

• 오른쪽 요소가 오른쪽으로 뜹니다.

• 어떤 요소도 부동하지 않습니다

플로팅 요소의 특징:

1. 플로팅 요소는 표준 문서 흐름에서 벗어나 블록 수준 요소와 인라인 요소의 제한을 제거합니다.

플로팅이 없는 세 가지 다른 div 상자의 모습입니다. :

두 개의 div 상자와 하나의 스팬 요소가 동시에 부동하도록 설정된 경우의 모습입니다.

2. 너비가 서로 달라붙는 효과가 있습니다. 충분하지 않으면 자동으로 줄바꿈이 발생합니다

플로팅이 없는 세 가지 다른 div 상자의 모습은 다음과 같습니다.

플로팅이 설정된 경우 세 가지 다른 div 상자의 모양은 다음과 같습니다.

3. 플로팅 요소가 표준 문서 흐름에서 분리되어 있지만 텍스트 흐름에서 분리되지 않고 단어로 둘러싸인 효과가 나타납니다

4. 플로팅 후 요소가 축소되는 효과가 있습니다. 레벨 요소에는 너비가 설정되어 있지 않습니다. 레벨 요소가 부동된 후 블록의 높이가 손실됩니다

5. 상위 요소가 높이를 설정하지 않으면 여러 하위 요소의 높이 합계가 높이를 지원합니다. 부동이 설정된 경우 하위 요소의 가장 높은 높이가 상위 요소의 높이를 지원합니다.

플로팅의 단점:

플로팅의 결과:

(1) 플로팅 요소는 문서 흐름에서 벗어났기 때문에 상위 요소의 높이를 확장할 수 없으며 동일한 내용에 영향을 미칩니다. 레벨 요소로.

(2) 플로팅 요소와 동일한 레벨의 비플로팅 요소는 문서 흐름을 벗어나 원래 위치를 차지하지 않기 때문에 플로팅 요소가 뒤따릅니다.

(3) 플로팅 요소가 요소가 첫 번째 부동 요소가 아닌 경우 이 요소 이전의 요소도 부동해야 합니다. 그렇지 않으면 페이지의 구조적 표시에 쉽게 영향을 미칠 수 있습니다.

우리는 알아야 합니다: 부동 상자는 다른 부동 요소를 만날 때까지 왼쪽과 오른쪽으로 이동할 수 있습니다. 상자 또는 상자의 바깥쪽 가장자리에 있는 상자입니다. 플로팅 상자는 문서 흐름의 일반적인 흐름에 속하지 않습니다. 요소가 플로팅되면 블록 수준 요소의 레이아웃에 영향을 주지 않고 인라인 요소의 레이아웃에만 영향을 미칩니다.

이때 문서 흐름의 일반적인 흐름에서는 플로팅 상자에 동일한 레이아웃 모드가 없는 것으로 표시됩니다. 컨테이너 상자의 높이가 부동 상자보다 작으면 "높이 붕괴"가 발생합니다.

플로팅 클리어:

방법 1: 새 요소 추가, 클리어 적용: 둘 다 다시 작동합니다.

方法二：父级div定义overflow：auto;

HTML:

<div class="box">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
  </div>

CSS：

.box {
      border: 1px solid #ccc;
      background: #fc9;
      color: #fff;
      margin: 50px auto;
      padding: 50px;
      overflow: auto; 
      zoom: 1; /*zoom: 1; 是在处理兼容性问题 */
    }

结果：也是实现了。

方法三：在父级样式添加伪元素:after或者:before（推荐）

HTML:

<div class="box">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
  </div>

CSS:

.box {
      border: 1px solid #ccc;
      background: #fc9;
      color: #fff;
      margin: 50px auto;
      padding: 50px;
    }
.box:after{
      content: '';
      display: block;
      clear: both;
}

结果：当然不用说啦

 

学习视频分享：css视频教程

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