자세한 CSS 플로팅: 시나리오, 사례, 오류가 발생하기 쉬운 지점 및 플로트 지우기

플로트 및 레이아웃

플로팅의 원래 의도는 조판 문제를 해결하는 것입니다: 텍스트 래핑 그림의 효과를 달성하기 위한 것이지만 웹 초기에는 좋은 레이아웃 도구가 없었기 때문에 플로팅이 레이아웃 도구로 널리 사용되었습니다 ^. )

온라인 케이스 .

플로팅은 프론트엔드 사람이라면 필수과목입니다 저의 프론트엔드 첫 번째 수업은 플로팅 애니메이션 컬러블럭을 사용하는 것입니다 웹 페이지 전체가 알록달록한 컬러블럭으로 채워질 때 저는 성취감을 느낍니다.

<style>
  .a {
      
      
    width: 1000px;
    height: 100px;
    background-color: oldlace;
  }

  .a1 {
      
      
    width: 150px;
    height: 100px;
    background-color: orange;
    float: left;
  }

  .a2 {
      
      
    width: 600px;
    height: 100px;
    background-color: peru;
    float: left;
  }

  .a3 {
      
      
    width: 100px;
    height: 100px;
    background-color: chocolate;
    float: right;
  }

  .b {
      
      
    width: 1000px;
    height: 300px;
    background-color: LightSalmon;
  }

  .c {
      
      
    width: 1000px;
    height: 300px;
    background-color: seashell;
  }

  .c1 {
      
      
    width: 250px;
    height: 150px;
    background-color: Coral;
    float: left;
  }

  .c2 {
      
      
    width: 250px;
    height: 150px;
    background-color: OrangeRed;
    float: left;
  }

  .c3 {
      
      
    width: 250px;
    height: 150px;
    background-color: DarkSalmon;
    float: left;
  }

  .c4 {
      
      
    width: 250px;
    height: 150px;
    background-color: Tomato;
    float: left;
  }

  .c5 {
      
      
    width: 250px;
    height: 150px;
    background-color: Salmon;
    float: left;
  }

  .c6 {
      
      
    width: 250px;
    height: 150px;
    background-color: Brown;
    float: left;
  }

  .c7 {
      
      
    width: 250px;
    height: 150px;
    background-color: LightCoral;
    float: left;
  }

  .c8 {
      
      
    width: 250px;
    height: 150px;
    background-color: RosyBrown;
    float: left;
  }
</style>

<div class="a">
  <div class="a1">LOGO</div>
  <div class="a2">导航</div>
  <div class="a3">注册登录</div>
</div>

<div class="b">大图</div>

<div class="c">
  <div class="c1">1</div>
  <div class="c2">2</div>
  <div class="c3">3</div>
  <div class="c4">4</div>
  <div class="c5">5</div>
  <div class="c6">6</div>
  <div class="c7">7</div>
  <div class="c8">8</div>
</div>

온라인 데모 , 코드를 복사하여 로컬에서 여는 것이 좋습니다. 효과가 더 좋습니다.

컬러 블록을 그릴 때 먼저 PS를 사용하여 너비와 높이를 측정한 다음 CSS를 사용하여 높이, 너비, 배경색 및 비고를 작성합니다. , 예쁘지 않나요? 아.

플로팅 레이아웃입니다.

[포인트] 플로팅 레이아웃 포인트:

• 먼저 디자인 초안을 분석하고 웹 페이지의 콘텐츠를 큰 블록에서 작은 블록으로 나눕니다.
• PS를 사용하여 각 블록의 높이와 너비를 측정합니다.
• CSS+float를 사용하여 색상 블록에 애니메이션을 적용합니다.

플로팅 레이아웃 FAQ

**문제 1: 너비 초과. **내용물이 컨테이너의 너비를 초과하면 그 뒤에 있는 작은 상자가 떨어집니다.

<style>
  .a {
      
      
    width: 1000px;
    height: 100px;
    background-color: wheat;
  }

  .a1 {
      
      
    width: 300px;
    height: 100px;
    background-color: skyblue;
    float: left;
  }

  .a2 {
      
      
    width: 400px;
    height: 100px;
    background-color: cadetblue;
    float: left;
  }

  .a3 {
      
      
    width: 400px;
    height: 100px;
    background-color: steelblue;
    float: left;
  }
</style>
<div class="a">
  <div class="a1"></div>
  <div class="a2"></div>
  <div class="a3"></div>
</div>

온라인 케이스 .

색 블록을 그릴 때 특정 색 블록이 빠진 것을 발견했다면 너비를 측정할 때 조금 과하게 측정했다는 뜻입니다. 컬러 블록이 많으면 눈이 흐려지기 때문에 키를 측정 할 때 실수하기 쉽습니다.중간 휴식을 취하고 경직되지 말고 몸이 중요합니다.

**질문 2, 사라지는 상자의 높이. **일부 학생들은 색 블록을 그릴 때 이상한 현상을 발견했습니다.

<style>
  .a {
      
      
    width: 1000px;
    background-color: lavender;
  }

  .a1 {
      
      
    width: 500px;
    height: 100px;
    background-color: Indigo;
    float: left;
  }

  .a2 {
      
      
    width: 500px;
    height: 100px;
    background-color: Violet;
    float: left;
  }

  .b {
      
      
    width: 1000px;
    height: 300px;
    background-color: Purple;
  }
</style>

<div class="a">
  <div class="a1"></div>
  <div class="a2"></div>
</div>

<div class="b">大图</div>

온라인 케이스 .

큰 그림의 박스는 분명히 높이가 300px로 설정되어 있는데 왜 200px밖에 남지 않았을까요? b 박스의 높이는 어디로 갔고, 그 이유는 무엇입니까? ? ? 왜? ? ?

[해석] 상자 a에는 높이가 설정되어 있지 않아 상자 b가 100px 위로 올라가기 때문입니다. 이것은 매우 일반적인 실수입니다. 상자의 높이를 설정하는 것을 잊는 것입니다. 실제 개발 과정에서 박스가 많고 컬러 블록의 힌트가 없어 높이를 잊기 쉽습니다. 일반적으로 웹 페이지에서 텍스트와 배경이 분리되는 현상은 대부분 이러한 오류 때문입니다. 해결 방법은 높이를 설정하거나 플로트를 지우는 것입니다.

[생각] 어떤 학생들은 상자 a 아래에 "큰 그림"이라는 두 단어가 나타나는 것을 보았습니다. 번역하면 단어가 맨 위에 있어야 합니다. 이것을 설명하는 방법은 무엇입니까?

떠 다니는 자연

부동 상자는 문서 흐름에서 벗어납니다.

위의 두 번째 상황이 나타나는 이유는 무엇입니까? 이는 플로트가 일반적인 문서 흐름에서 벗어나기 때문입니다. 즉, 문서 흐름에서 정확히 절반 레이어를 벗어났기 때문입니다. 문서 흐름에서 이탈한다는 것은 부동 상자의 배경이 문서 흐름에서 분리되지만 콘텐츠는 여전히 원래 위치를 차지한다는 것을 의미합니다 .

암호:

<style>
  .a {
      
      
    width: 100px;
    height: 100px;
    background-color: rgb(0, 0, 0, 0.2);
    float: left;
  }

  .b {
      
      
    background-color: orange;
  }
</style>

<div class="a"></div>
<div class="b">
  <p>窗前明月光</p>
  <p>疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>
</div>

온라인 데모

[해석] 먼저 a박스에 폭, 높이, 투명색을 부여하고 float를 설정한 다음 b박스에 내용을 추가하고 배경색을 설정한다. 플로팅 박스의 배경이 문서흐름에서 벗어나 있기 때문에 b박스의 배경은 위로 이동하지만 a박스의 내용은 문서흐름을 벗어나지 않기 때문에 b박스의 내용은 옆으로 밀려난다. 상자 a의 너비를 100%로 설정하면 상자 a의 내용이 완전히 압축되고 b에 고정 높이를 설정하면 내용이 배경과 분리됩니다.

<style>
  .a {
      
      
    width: 100%;
    height: 100px;
    background-color: rgb(0, 0, 0, 0.2);
    /*注释浮动会正常排布*/
    float: left;
  }

  .b {
      
      
    height: 150px;
    background-color: orange;
  }
</style>

<div class="a"></div>
<div class="b">
  <p>窗前明月光</p>
  <p>疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>
</div>

부동 상자의 배경 높이가 무너져 혼란스러운 조판을 유발하는 것을 방지하기 위해 고정 높이 컨테이너로 부동 상자를 래핑하여 해결할 수 있습니다.

<style>
  .wrapper {
      
      
    height: 100px;
  }

  .a {
      
      
    width: 100px;
    height: 100px;
    background-color: rgb(0, 0, 0, 0.2);
    float: left;
  }

  .b {
      
      
    background-color: orange;
  }
</style>

<div class="wrapper">
  <div class="a"></div>
</div>

<div class="b">
  <p>窗前明月光</p>
  <p>疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>
</div>

이는 후속 요소의 배열에 영향을 미치지 않습니다.

[외부 링크 사진 전송 실패, 소스 사이트에 거머리 방지 메커니즘이 있을 수 있으므로 사진을 저장하고 직접 업로드하는 것이 좋습니다(img-TZIMbBB4-1665961352336)(image-20221016155604680.png)]

부동 요소의 위치

부동 상자는 문서 흐름(절반 수준)에서 벗어나 부모 요소 또는 다른 부동 상자의 왼쪽 또는 오른쪽 테두리와 접하고 상위 요소의 위쪽 가장자리와 접합니다. 상위 요소의 나머지 너비가 플로팅 요소에 맞지 않으면 플로팅 상자가 새 줄을 시작하고 순서대로 계속 정렬됩니다.

[중요] 여백이 설정되지 않은 경우 플로팅 상자가 간격 없이 서로 옆에 있습니다.

[사례] 사진 사이의 간격을 지웁니다.

<style>
  .a {
      
      
    width: 300px;
    background-color: rgb(0, 0, 0, 0.2);
  }

  .a img {
      
      
    width: 100px;
  }
</style>

<div class="a">
  <img src="https://images.pexels.com/photos/13313507/pexels-photo-13313507.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load" alt="">
  <img src="https://images.pexels.com/photos/7961265/pexels-photo-7961265.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load" alt="">
</div>

[외부 링크 사진 전송 실패, 소스 사이트에 거머리 방지 메커니즘이 있을 수 있으므로 사진을 저장하고 직접 업로드하는 것이 좋습니다(img-EtgnbsLd-1665961352337)(image-20221016161512795.png)]

위의 두 그림을 자세히 살펴보십시오. 그림 사이에 간격이 있고 그림 요소 사이의 빈 문자로 간격이 형성됩니다. 공백이나 줄 바꿈 없이 서로 옆에 두 그림을 쓸 수 있습니다.

<img src="..." /><img src="..." />

그러나이 솔루션은 신뢰할 수 없습니다. 서식 지정 후 코드가 중단 될 수 있으므로 두 그림에 플로팅을 추가하면이 문제를 완벽하게 해결할 수 있습니다 (플로팅을 추가하면 배경이 사라짐). 온라인 데모 :

부동 상자는 부모 요소의 높이에 0을 기여합니다.

일반 레이아웃 흐름에서 상위 요소가 높이 값을 설정하지 않으면 높이는 자연 높이라고도 하는 확장된 콘텐츠의 높이와 같습니다. 그러나 부동 상자는 부모 요소의 높이에 0을 기여합니다. 컨테이너에 부동 상자(플로팅 레이아웃)만 포함된 경우 높이가 0입니다. 이러한 현상을 부모 요소 축소라고 합니다.

상위 요소의 축소는 현재 컨테이너에 영향을 미칠 뿐만 아니라 특히 컨테이너의 콘텐츠가 유익한 경우 모든 후속 요소에 영향을 줄 수 있습니다.

온라인 케이스

이전 사례는 부모 요소에 대한 높이 값을 설정하여 이 문제를 해결했는데, 이는 명백한 단점이 있습니다. 콘텐츠 높이가 불확실하거나 콘텐츠가 컨테이너 높이를 초과하면 실패합니다. 부동의 부작용을 제거하고 상위 요소의 자연스러운 높이를 유지할 수 있는 방법이 있습니까?

첫 번째 방법: 상위 요소 컨테이너를 설정합니다.

overflow: hidden;

이렇게 하면 내부의 요소가 외부에 영향을 주지 않습니다. 이 방법은 부작용은 해결하지만 자연스러운 키 문제는 해결하지 못합니다.

클리어 플로트

클리어 플로트와 플로트는 쌍둥이 형제입니다.플로트는 사용하기 쉽지만 때때로 "순종"하지 않고 다른 요소에 영향을 미칠 수 있습니다.클리어 플로트는 플로팅 상자의 "엉덩이를 닦는다".

clear 속성은 부동 요소가 허용되지 않는 요소의 측면을 정의합니다. CSS1과 CSS2에서는 투명 요소(clear 속성이 설정된 요소)에 위쪽 여백을 자동으로 추가하여 이 작업을 수행합니다. CSS2.1에서는 요소의 위쪽 여백 위에 여백이 추가되지만 여백 자체는 변경되지 않습니다. 어느 쪽이든 최종 결과는 동일하므로 왼쪽 또는 오른쪽이 ^{cleared 로} 선언된 경우 해당 측면에 떠 있는 요소의 아래쪽 여백 테두리 바로 아래에 있는 요소의 위쪽 테두리 테두리를 만듭니다 .

일반적인 선언 방법:

clear: none;
clear: left;
clear: right;
clear: both;

위의 질문을 받아보세요.

두 번째 방법: 빈 요소를 만들고 .clear{clear:both;}격리된 영역을 형성하도록 설정합니다(이때 상자의 높이는 제거해야 함).

<div class="box cyan">
  <div class="side orange right">很长的侧边栏</div>
  <p>
    君不见黄河之水天上来②，奔流到海不复回。
    君不见高堂明镜悲白发③，朝如青丝暮成雪④。
  </p>
  <div class="clear"></div>
</div>

<div class="lime">
  人生得意须尽欢⑤，莫使金樽空对月⑥。
  天生我材必有用⑦，千金散尽还复来⑧。
  烹羊宰牛且为乐，会须一饮三百杯⑨。
  岑夫子⑩，丹丘生⑪，将进酒，杯莫停⑫。
</div>

좋습니다!!! 부작용과 자연스러운 높이 문제를 완벽하게 해결하지만 이 방법은 불편해 보이는 빈 요소를 추가로 생성합니다. ::after유사 개선하세요.

<style>
  .box {
    
    
    width: 300px;
    /*height: 100px;*/ /*高度不需要*/
  }

  .side {
    
    
    width: 100px;
    height: 200px;
  }

  .right {
    
    
    float: right;
  }

  .clearfix::after {
    
    
    /*三条缺一不可*/
    display: block;
    content: '';
    clear: both;
    /*兼容性*/
    visibility: hidden;
    height: 0;
  }

  .orange {
    
    
    background-color: orange;
  }

  .lime {
    
    
    background-color: lime;
  }

  .cyan {
    
    
    background-color: cyan;
  }
</style>

<div class="box cyan clearfix">
  <div class="side orange right">很长的侧边栏</div>
  <p>
    君不见黄河之水天上来②，奔流到海不复回。
    君不见高堂明镜悲白发③，朝如青丝暮成雪④。
  </p>
</div>

<div class="lime">
  人生得意须尽欢⑤，莫使金樽空对月⑥。
  天生我材必有用⑦，千金散尽还复来⑧。
  烹羊宰牛且为乐，会须一饮三百杯⑨。
  岑夫子⑩，丹丘生⑪，将进酒，杯莫停⑫。
</div>

부모 요소에 대한 스타일을 설정하기만 하면 됩니다. clearfix는 플로팅의 부작용을 완벽하게 제거할 수 있습니다.

요약

• 플로팅 요소는 레이어 절반 동안 문서 흐름에서 벗어나고 플로팅 요소의 배경은 문서 흐름에서 벗어납니다.
• 부동 요소는 상위 요소에 높이를 제공하지 않습니다.
• 플로팅 요소는 뛰어난 속성을 가지고 있습니다. 인라인 요소는 높이, 너비, 위쪽 및 아래쪽 여백도 설정할 수 있으며 여백 축소가 없습니다.
• 플로팅 요소는 후속 요소의 조판에 영향을 줄 수 있으므로 clear를 사용하여 플로팅을 지울 수 있으며 캡슐화된 clearfix 클래스를 사용하는 것이 좋습니다.

참조 기사

♥ 저는 프론트엔드 엔지니어입니다: 당신의 연인 Sen. 여러분의 좋아요와 관심에 진심으로 감사드리며, 토론이나 협업에 참여하는 모든 분들을 환영합니다.

★ 이 기사는 CC BY-SA 4.0 프로토콜을 사용하는 오픈 소스 입니다 .

★ 창의 협력 또는 채용 정보를 원하시면 개인 메시지 또는 이메일을 보내주십시오: [email protected], 제목: 창의 협력 또는 프런트엔드 엔지니어 모집 .

---

1. 사라 코프. 플로트 . css-tricks.com. ↩︎

2. Isabella css clear Floating .segmentfault 원리와 방법 ↩︎