> 웹 프론트엔드 > 프런트엔드 Q&A > CSS float가 래핑되지 않습니다.

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

王林
풀어 주다: 2023-05-09 09:19:37
원래의
2096명이 탐색했습니다.

웹페이지 생성 과정에서 우리는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿