웹 프론트엔드 HTML 튜토리얼 떠돌다의 의미를 없애다

떠돌다의 의미를 없애다

Feb 19, 2024 pm 06:37 PM
웹페이지 레이아웃 플로트 클리어 overflow 클리어 플로트 클리어 스타일 조판 레이아웃

떠돌다의 의미를 없애다

부동 소수점을 지우는 것은 웹 페이지 레이아웃에서 요소가 부동 속성으로 설정되면 주변 요소가 영향을 받아 레이아웃 혼란이나 덮어쓰기가 발생할 수 있음을 의미합니다. 이 문제를 해결하려면 몇 가지 트릭을 사용하여 부동 소수점의 효과를 정리해야 합니다.

일반적으로 부동 요소는 상위 요소를 붕괴시키고 높이를 정상적으로 계산할 수 없으며 형제 요소가 가려지거나 잘못 배치될 수 있습니다. 이때 플로트를 지우고 요소를 일반 레이아웃으로 되돌려야 합니다.

부동 요소를 지우는 일반적인 기술은 다음과 같습니다.

  1. 부동 요소 뒤에 빈 div 레이블을 추가하고 레이블에 clear: 둘 다 설정하는 등 고정 높이 비부동 빈 레이블을 사용하여 부동 요소를 지웁니다. ; 속성. 이를 통해 상위 요소는 높이를 다시 계산하고 부동 효과를 지울 수 있습니다. clear: both; 属性。这样可以使父元素重新计算高度,清除浮动的影响。
<div class="clearfix"></div>

<style>
.clearfix {
  clear: both;
}
</style>
로그인 후 복사
  1. 使用 overflow: hidden; 属性清除浮动,给浮动元素的父元素设置 overflow: hidden; 属性,可以让父元素自动扩展高度以包含浮动元素。
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

<style>
.parent {
  overflow: hidden;
}

.child {
  float: left;
}
</style>
로그인 후 복사
  1. 使用伪元素 ::after
  2. <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
    </div>
    
    <style>
    .parent::after {
      content: "";
      display: table;
      clear: both;
    }
    
    .child {
      float: left;
    }
    </style>
    로그인 후 복사
      overflow:hidden; 속성을 ​​사용하여 부동 소수점을 지우고 overflow:hidden; 속성을 ​​상위 요소로 설정하세요. 플로팅 요소를 포함하도록 부모 요소의 높이가 자동으로 확장됩니다.

      rrreee

        의사 요소 ::after를 사용하여 플로팅을 지우고 다음 스타일을 플로팅 요소의 상위 요소에 설정한 다음 의사 요소를 추가하세요. 부동의 효과를 취소합니다.

        🎜rrreee🎜이러한 방법은 플로트를 제거하는 데 일반적으로 사용되는 방법입니다. 특정 필요에 따라 플로트의 영향을 제거하는 적절한 방법을 선택할 수 있습니다. 🎜🎜플로트 지우기는 웹 페이지 레이아웃에서 매우 중요한 부분으로, 레이아웃의 안정성과 가독성을 보장할 수 있습니다. 실제 개발에서는 다양한 상황에 따라 적절한 부동 청산 방법을 선택하는 것이 중요하며, 이는 웹 페이지의 표시 효과와 사용자 경험을 크게 향상시킬 수 있습니다. 🎜

      위 내용은 떠돌다의 의미를 없애다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    인기 기사

    R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
    1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 최고의 그래픽 설정
    1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
    Will R.E.P.O. 크로스 플레이가 있습니까?
    1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

    뜨거운 도구

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    2018-2024 USD의 Bitcoin의 최신 가격 2018-2024 USD의 Bitcoin의 최신 가격 Feb 15, 2025 pm 07:12 PM

    실시간 비트 코인 USD 가격 비트 코인 가격에 영향을 미치는 요인 향후 비트 코인 가격을 예측하기위한 지표 다음은 2018-2024 년 비트 코인 가격에 대한 몇 가지 주요 정보입니다.

    H5 페이지 제작은 프론트 엔드 개발입니까? H5 페이지 제작은 프론트 엔드 개발입니까? Apr 05, 2025 pm 11:42 PM

    예, H5 페이지 제작은 HTML, CSS 및 JavaScript와 같은 핵심 기술을 포함하는 프론트 엔드 개발을위한 중요한 구현 방법입니다. 개발자는 & lt; canvas & gt; 그래픽을 그리거나 상호 작용 동작을 제어하기 위해 JavaScript를 사용하는 태그.

    CSS를 통해 크기 조정 기호를 사용자 정의하고 배경색으로 균일하게 만드는 방법은 무엇입니까? CSS를 통해 크기 조정 기호를 사용자 정의하고 배경색으로 균일하게 만드는 방법은 무엇입니까? Apr 05, 2025 pm 02:30 PM

    CSS에서 크기 조정 기호를 사용자 정의하는 방법은 배경색으로 통합됩니다. 매일 개발에서, 우리는 종종 조정과 같은 사용자 인터페이스 세부 정보를 사용자 정의 해야하는 상황을 발생시킵니다.

    JavaScript 또는 CSS를 통해 브라우저 인쇄 설정에서 페이지 상단 및 끝을 제어하는 ​​방법은 무엇입니까? JavaScript 또는 CSS를 통해 브라우저 인쇄 설정에서 페이지 상단 및 끝을 제어하는 ​​방법은 무엇입니까? Apr 05, 2025 pm 10:39 PM

    브라우저의 인쇄 설정에서 페이지의 상단과 끝을 제어하기 위해 JavaScript 또는 CSS를 사용하는 방법. 브라우저의 인쇄 설정에는 디스플레이가 ...인지 제어 할 수있는 옵션이 있습니다.

    인라인 블록 요소가 왜 잘못 정렬됩니까? 이 문제를 해결하는 방법? 인라인 블록 요소가 왜 잘못 정렬됩니까? 이 문제를 해결하는 방법? Apr 04, 2025 pm 10:39 PM

    인라인 블록 요소의 잘못 정렬 된 디스플레이에 대한 이유와 솔루션과 관련하여. 웹 페이지 레이아웃을 작성할 때, 우리는 종종 이상하게 겉보기에 이상한 디스플레이 문제가 발생합니다. 비교하다...

    라인 브레이크 후 스팬 태그의 간격이 너무 작은 문제를 우아하게 해결하는 방법은 무엇입니까? 라인 브레이크 후 스팬 태그의 간격이 너무 작은 문제를 우아하게 해결하는 방법은 무엇입니까? Apr 05, 2025 pm 06:00 PM

    웹 페이지 레이아웃에서 새로운 라인을 사용한 후 스팬 태그 간격을 우아하게 처리하는 방법은 종종 여러 스파 스팬을 가로로 배열해야 할 필요성이 있습니다 ...

    부정적인 마진이 어떤 경우에는 적용되지 않는 이유는 무엇입니까? 이 문제를 해결하는 방법? 부정적인 마진이 어떤 경우에는 적용되지 않는 이유는 무엇입니까? 이 문제를 해결하는 방법? Apr 05, 2025 pm 10:18 PM

    어떤 경우에는 부정적인 마진이 적용되지 않는 이유는 무엇입니까? 프로그래밍 중에 CSS의 부정적인 마진 (음수 ...

    CSS 및 Flexbox를 사용하여 다른 화면 크기로 이미지와 텍스트의 반응 형 레이아웃을 구현하는 방법은 무엇입니까? CSS 및 Flexbox를 사용하여 다른 화면 크기로 이미지와 텍스트의 반응 형 레이아웃을 구현하는 방법은 무엇입니까? Apr 05, 2025 pm 06:06 PM

    웹 디자인, CSS에서 다른 화면 크기에서 레이아웃 변경을 구현할 때 CSS를 사용하여 반응 형 레이아웃 구현 ...

    See all articles