CSS float가 래핑되지 않습니다.

웹페이지 생성 과정에서 우리는 CSS의 float 속성을 사용하여 동일한 행이나 열에 여러 요소를 정렬하는 경우가 많습니다. 하지만 때때로 플로팅 요소가 다음 줄에 할당되는 경우가 있습니다. 이때 플로팅 요소가 래핑되는 것을 방지하기 위해 몇 가지 기술을 익혀야 합니다.

1. 부동 소수점 지우기

너비가 설정되지 않은 경우 부동 요소는 기본적으로 상위 요소의 너비를 차지합니다. 상위 요소의 높이가 충분하지 않으면 부동 요소가 다음 줄로 "압착"됩니다. 그렇다면 이 문제를 해결하는 방법은 무엇입니까? 클리어 플로트 기술을 사용할 수 있습니다. 부동 소수점을 지우는 일반적인 방법은 다음과 같습니다.

1. 아래와 같이 Clearfix

를 사용하여 상위 요소의 CSS 스타일에 "clearfix" 클래스를 추가합니다.

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

HTML에서 클래스 이름 "clearfix"를 추가합니다.

<div class="clearfix">
    <div class="float-left">Left</div>
    <div class="float-left">Left</div>
</div>

2. 의사 클래스를 사용하여 부동 소수점을 삭제합니다.

아래와 같이 상위 요소의 CSS 스타일에 의사 클래스 ":before" 또는 ":after"를 추가합니다.

.parent:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

HTML에서 상위 요소를 지정합니다. 아래와 같이 클래스 이름 "parent"를 추가합니다.

<div class="parent">
    <div class="float-left">Left</div>
    <div class="float-left">Left</div>
</div>

2. 디스플레이 사용: inline-block

플로팅 요소가 래핑되는 것을 방지하기 위해 플로트를 지우는 것 외에도 다음을 사용할 수도 있습니다. "디스플레이: 인라인 블록" 속성. 이 속성을 사용하면 요소가 인라인 블록 수준 요소의 특성을 가질 수 있으며 동일한 줄 표시를 유지하면서 높이를 설정할 수 있습니다.

<div style="display: inline-block;">Inline-block</div>
<div style="display: inline-block;">Inline-block</div>

3. 너비 설정 사용

플로팅 요소에 너비가 설정되어 있으면 상위 요소의 높이가 충분하지 않아도 같은 줄에 표시됩니다.

<div style="width: 50%; float: left;">Left Float</div>
<div style="width: 50%; float: left;">Right Float</div>

4. 탄력적 레이아웃 사용

유연한 레이아웃은 CSS3에서 제공하는 레이아웃 방법으로, 여러 요소를 동일한 행이나 열에 배열할 때 매우 편리합니다. 유연한 레이아웃을 사용하려면 하위 요소가 적응형 레이아웃을 수행할 수 있도록 상위 요소에 "display: flex" 속성을 설정하기만 하면 됩니다.

<div style="display: flex;">
    <div style="flex: 1;">Flex 1</div>
    <div style="flex: 1;">Flex 2</div>
</div>

위는 플로팅 요소가 래핑되는 것을 방지하는 여러 가지 방법이며 실제 상황에 따라 적합한 방법을 선택하면 됩니다.

위 내용은 CSS float가 래핑되지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!