CSS에서 float 사용

float 속성은 페이지의 요소를 부동시키고 일반적인 유동 레이아웃에 영향을 주지 않고 인접한 요소와 나란히 표시합니다. float 값은 left(왼쪽 float), right(오른쪽 float), none(clear float)입니다. 플로팅 요소는 콘텐츠 오버플로, 간격 및 상위 컨테이너 높이에 영향을 미칩니다. 부동 소수점을 지우는 방법에는 속성 지우기, 부동 요소 및 오버플로: 숨김이 포함됩니다.

CSS에서 float 사용

float 정의

CSS의 float 속성은 콘텐츠 상자 외부에 요소를 배치하여 페이지에서 부동하게 만듭니다. 플로팅 요소는 다른 요소의 일반 유동 레이아웃에 영향을 주지 않지만 인접한 요소와 나란히 표시됩니다.

float 값 ​​

float 속성은 다음 값을 허용할 수 있습니다.

• left: 요소를 컨테이너 왼쪽에 띄웁니다.
• right: 요소를 컨테이너 오른쪽에 띄웁니다.
• none: float를 지우고 요소를 일반 유동 레이아웃으로 되돌립니다.

Usage

요소를 부동화하려면 해당 스타일에 부동 속성을 추가하세요.

<code class="css">element {
  float: left;
}</code>

Affects

플로팅된 요소가 근처 요소에 영향을 줍니다.

• 콘텐츠 오버플로: 플로팅된 요소 콘텐츠 인접한 요소가 오버플로될 수 있습니다.
• 간격: 플로팅된 요소와 인접한 요소 사이에 간격이 있을 수 있습니다.
• 상위 컨테이너 높이: 플로팅된 요소의 높이가 상위 컨테이너보다 높으면 상위 컨테이너의 높이는 플로팅된 요소를 수용하도록 자동으로 조정됩니다.

Clear Floats

float를 지우려면 다음 방법 중 하나를 사용할 수 있습니다.

• Clear 속성: clear 속성을 요소에 적용하여 모든 float 요소를 지웁니다.
• 부동 요소: 부동 요소 뒤에 부동 요소를 추가하고 부동 요소를 새 행으로 지웁니다.
• overflow: Hidden: 컨테이너의 부동 요소를 숨기려면 상위 컨테이너에 오버플로 속성을 적용하세요.

예

다음 코드는 두 개의 부동 요소가 있는 컨테이너를 만듭니다.

<code class="html"><div class="container">
  <div class="element1">元素 1</div>
  <div class="element2">元素 2</div>
</div></code>

<code class="css">.container {
  display: flex;
}

.element1 {
  float: left;
  background: red;
  width: 100px;
}

.element2 {
  float: right;
  background: blue;
  width: 100px;
}</code>

출력:

<code>元素 1 | 元素 2</code>

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