CSS에서 플로팅이 미치는 영향과 플로팅을 제거하는 방법에 대한 자세한 설명

• 첫 전화면접에서 면접관님이 저에게 플로팅을 없애는 방법을 아시나요?
  내 대답은 다음과 같습니다. "두 가지 방법이 있습니다. 하나는 float에서 제거해야 하는 요소에 "clear:both"를 사용하는 것이고, 다른 하나는 상위 요소에서 "overflow:hidden". 솔직히 두 번째 방법을 얘기할 때 실천은 안 했어요. 그냥 읽고 막연하게 말했어요.
  

• 두 번째 인터뷰에서도 이 질문을 받았는데, 첫 번째 인터뷰에서 배운 교훈 때문에 다시 돌아가서 "CSS 디자인 가이드"에 특별한 장이 있습니다. 플로트를 제거하는 여러 가지 방법에 대해 이야기합니다. 그런데 시간이 촉박해서 책을 한 번만 읽고 손으로 타이핑하지 않아서 물어보니 1234로 나열했습니다.

  1. 둘 다 <.>2. 오버플로: 숨겨진;
  3. 플로팅 부모 요소
  4. 플로팅 요소 뒤에 디플로팅 요소를 추가합니다
  언니는 인터뷰를 마치고 "이 가로를 보세요
  "라고 덧붙였습니다. 네비게이션
  열을 사용하여 구현해야 하므로 Overflow:hidden을 사용할 수 없습니다. 행 표시줄에 하위 메뉴가 있으면 표시되지 않기 때문입니다." 당시 내 대답은 플로팅 요소 뒤에 플로팅 요소를 제거하는 요소를 추가하는 것이었습니다. 면접관은 그것이 맞는지 틀린지는 말하지 않았습니다. 아직 네비게이션을 직접 해봐야 알 수 있습니다. 🎜>플로팅 원리에 대해 여기에 글을 쓴 적이 있습니다. 오늘은 플로팅 제거에 대한 글을 하나 더 작성하겠습니다. 내용은 책
  
  

  에서 따왔습니다. 플로팅의 영향

최신 브라우저의 성능

두 개의 인접한 인라인 요소 배치, 두 번째 인라인 요소가 플로팅 상태로 남아 있으면
• 디스플레이

  은 인라인 요소가 부동으로 설정된 후 차단되도록 수정됩니다. 그러나 해당 크기는 설정이나 내용의 크기에 따라 표시되며 전체 줄 공간을 차지하지 않으며 옆에 있는 인라인 요소가 차지합니다. 이 줄의 플로팅 요소 뒤에 있어야 하며 플로팅 요소와 같은 위치에 있지 않습니다.

  그러나 너비가 설정된 인라인 블록 수준 요소 옆에 있으면 이 인라인 블록 수준 요소는 다음과 같습니다. 요소는 플로팅된 요소 뒤에도 배치됩니다.
블록 수준 요소 옆에 있으면 이 블록 수준 요소가 플로팅된 인라인 요소의 공간을 차지하게 됩니다.

• IE7 및 이전 버전의
  ie 브라우저에서는 옆의 인라인 요소가 새로운 플로팅 요소 줄 아래에 있게 됩니다. 더 이상한가요? 🎜>
  
  블록 수준 요소가 부동된 후
  브라우저는 원래 블록 수준 요소가 차지했던 공간을 되찾고 바로 다음 요소가 수준으로 올라갑니다. 공간이 허용하는 경우 부동 요소. 동일한 수준에서 부동으로 설정된 블록 수준 요소는 원래 위치를 유지하고 변경에 영향을 미치는 요소를 자동으로 감시합니다.

  플로팅된 요소의 상위 요소 테두리도 상위 요소 내에서 플로팅되지 않은 하위 요소로 축소됩니다.

• 인라인 요소가 플로팅된 후사실 제가 현재 하고 있는 연습에서는 이렇게 설정한 적이 없는 것 같지만 색다른 경험을 선사합니다.
  

• 인라인 요소의 플로팅에 관해서는 다른 사이트의 소스코드를 참고할 때 접한 적이 없어서 먼저 놔두겠습니다.
  
  

플로팅 요소를 둘러싸는 여러 가지 방법과 각 방법에 적합한 상황은 다음과 같습니다.

• 
  

html 태그에 하위 요소를 추가하고 여기에 명확한
속성

을 적용하면 됩니다.

  <section >
      <img src="7f0ff.png" alt="" style="float:left" />
      <p>it s fun to float</p>
      <p style="clear:left;"></p>
  </section>
  <footer>
      here is the footer element.
  </footer>

• 그러나 이 순수한 성능 요소를 특별히 추가하고 싶지 않다면 CSS를 사용하여 이 명확한 요소를 추가할 수 있습니다. 섹션에 클래스 추가:

  .clearfix:after{
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;}

  • 방법 1:

    추가:overflow:hidden to the parent element이 방법은 상위 요소를 강제합니다. float 하위 요소를 둘러쌉니다.

    사실:overflow:hidden 문의 실제 목적은 포함 요소가 너무 큰 콘텐츠로 인해 늘어나는 것을 방지하는 것입니다. overflow:hidden을 적용한 후에도 포함 요소는 설정된 너비와 높이를 유지하며 크기가 너무 큰 텍스트 콘텐츠는 컨테이너에 의해 잘립니다. 또한,overflow:hidden에는 또 다른 효과가 있습니다. 즉, 상위 요소가 부동 하위 요소를 포함하도록 안정적으로 강제할 수 있습니다.
  그러나 결과적으로 텍스트 내용이 설정된 너비를 초과하면 표시되지 않습니다.

  • 방법 2: 동시에 상위 요소를 플로팅합니다.
    사실 이는 전체 웹사이트 레이아웃에 대해 명확하게 플로팅하는 것이 아니라 상위 요소를 둘러싸게 만드는 것뿐입니다. 그러나 부동 상위 요소가 부동 하위 요소를 둘러싸더라도 전체 웹 사이트의 레이아웃에 대한 부동 상위 요소 자체의 영향을 해결하지 못하는 경우도 있습니다. 일부 웹 사이트 소스 코드에서는 여전히 이를 사용하고 싶어합니다. 그런 다음 부동 상위 요소를 다른 상위 요소로 둘러싸서 웹 페이지의 다른 콘텐츠 레이아웃에 영향을 주지 않도록 너비와 높이를 설정합니다.

  • 방법 3: 비부동 클리어 요소 추가
    는 상위 요소의 끝에 부동이 아닌 하위 요소를 추가하는 것입니다. 하위 요소 부동소수점을 지웁니다.
    그러나 포함 요소의 끝에 하위 요소를 일반 요소로 추가하는 방법에는 두 가지가 있습니다.

  이 세 가지 메소드는 부동 하위 요소를 둘러싸는 상위 요소를 사용하여 구현됩니다.
  다음 세 가지 방법을 분석하세요.
  1. 드롭다운 메뉴 의 최상위 요소에는 Overflow:hidden을 적용할 수 없습니다. 그렇지 않으면 드롭다운 메뉴가 하위 요소로 적용됩니다. 표시되지 않습니다.
  2. 자동으로 여백 이 중앙에 맞춰진 요소에는 부동 상위 요소 기술을 사용할 수 없습니다. 그렇지 않으면 더 이상 중앙에 맞춰지지 않습니다.
  그러나 경우에 따라 상위 요소가 없으면 어떻게 될까요?
  하나를 더 추가하면 문제가 되지 않지만 순회 깊이가 증가합니다.
  요소가 플로팅 요소의 영향을 받기를 원하지만 그 뒤의 요소도 영향을 받지 않기를 원하는 경우. 부동 요소의 영향을 받으려면 이 요소 내에 블록 수준 요소를 추가한 다음 이 블록 수준 요소 에 대한 부동 을 지울 수 있습니다. 이 요소에 추가 높이를 설정하지 않으면 효과가 나타나지 않을 것입니다. 이 기사를 읽는 사람들이 직접 테스트해 볼 수 있기를 바랍니다.

  [관련 추천]

  1. 무료 CSS 온라인 동영상 튜토리얼

  2. CSS 온라인 매뉴얼

  3. php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼

  위 내용은 CSS에서 플로팅이 미치는 영향과 플로팅을 제거하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!