내 플로팅 요소가 올바르게 정렬되지 않는 이유는 무엇입니까?

CSS Float 동작의 기대와 현실

CSS에서 float 속성은 일반적으로 요소를 가로로 정렬하는 데 사용됩니다. 그러나 다른 요소와 함께 사용할 경우 예상치 못한 동작이 발생할 수 있습니다.

문제

다음 예는 일반적인 오해를 보여줍니다.

<code class="html"><div class="inline">
    first line<br>
    second line<br>
    third line<br>
</div>

<div class="yellow">floated div</div></code>

<code class="css">.inline {
    float:left;
}

.yellow {
    background-color:yellow;
}</code>

이 예에서는 두 번째 div(노란색 배경)가 첫 번째 div의 오른쪽에 정렬될 것으로 예상할 수 있습니다. 그러나 라이브 예에서 볼 수 있듯이 여전히 컨테이너의 전체 너비를 차지합니다.

동작 이해

이 동작은 실제로 부동 위치 지정의 의도된 결과입니다. . 요소가 부동되면 후속 콘텐츠가 해당 요소의 오른쪽 아래로 흐릅니다. 그러나 포함 블록(다음 요소에 의해 설정됨)의 너비는 여전히 예약됩니다.

CSS 사양에 따라 다음과 같은 블록 수준 요소(예: div 및 p)는 위치가 지정되지 않았습니다. 플로트를 무시하세요. 반면에 라인 상자는 플로트 측면을 따라 흐르지만 너비는 짧아집니다.

해결책

예상한 결과를 얻으려면 두 번째 div 올바르게 정렬되면 두 번째 div에 표시되지 않는 값으로 오버플로 속성을 추가할 수 있습니다. 이렇게 하면 CSS 레벨 2.1 사양에 지정된 대로 부동 요소가 겹치는 것을 방지할 수 있습니다.

예

<code class="css">.yellow {
    overflow: hidden;
}</code>

이를 추가하면 두 번째 div는 더 이상 플로팅된 요소를 넘어 확장하여 원하는 정렬을 만듭니다.

겹침의 목적

겹침은 후속 콘텐츠가 플로팅된 요소를 넘어 계속될 만큼 긴 상황에서 유용합니다. 기본적으로 겹치는 부분이 제한되어 있으면 콘텐츠가 플로팅된 요소 아래에서 계속되지 않아 예상치 못한 결과가 발생합니다.

위 내용은 내 플로팅 요소가 올바르게 정렬되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!