CSS 클리어 플로트

오늘 수레 청소 기사를 봤는데 갑자기 뇌가 단락됐죠? 왜 클리어 플로트인가? 무지함을 용서하시고, 검색해 보니 이렇게 되어 있더군요.. 원문을 알게 되었는데, 아아, 이미 기록이 있어서 자주 사용하다가 원리조차 잊어버렸습니다. 글쎄, 같은 실수를 반복하지 않으려면 직접 요약하는 것이 좋습니다! 말할 것도 없이 코드는 증거입니다!

<span style="font-size: 14px;"><span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>为什么要清除浮动<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="background-color: #f5f5f5; color: #800000;">            .wrapper</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> cornflowerblue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">2px solid black</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 8</span> <span style="background-color: #f5f5f5; color: #800000;">            .box1</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> red</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 9</span> <span style="background-color: #f5f5f5; color: #800000;">            .box2</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> black</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">10</span> <span style="background-color: #f5f5f5; color: #800000;">            .box3</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> chocolate</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">11</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="wrapper"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box2"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box3"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">19</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span>

그럼, 실행 중인 각 브라우저의 렌더링은 다음과 같습니다.

여기서 A-B-C는 각각 I 요소의 하위 요소입니다. 부동 요소가 없으면 표준 문서 흐름(블록 수준 요소는 위에서 아래로, 인라인 요소는 왼쪽에서 오른쪽으로)에 따라 배치됩니다. ) 웹페이지는 합리적이어야 합니다. 제한된 공간에 더 많은 정보를 표시해야 하는 경우도 있습니다. 때로는 긴 Flexbox를 사용하지 않습니다. (유연한 상자 레이아웃) IE8 이하는 지원되지 않기 때문입니다. 제가 어떻게 아는지 물어보고 싶으시면 http://caniuse.com/#home URL을 제공하고 직접 검색해 보세요! 게다가 IE는 VW, VH 유닛을 지원하지 않으니 어린이 여러분, 주의해서 사용하세요! 보통

부모 요소의 너비와 높이를 설정할 필요가 없으며 너비와 높이가 조정되기를 원하지만, 자식 요소에 float: left;를 추가하면 어떻게 될까요? 사진으로 이야기 나누세요:

부모 요소는 어디로 갔나요? ! 자, 여기서는 비유를 사용하여 설명하겠습니다. 상상력이 부족한 점을 용서해 주세요. 우리는 하위 상자를 계속 넣으면 자동으로 축소될 수 있는 상자로 상상합니다. 비어 있으면 자동으로 늘어납니다. 자식 요소에 float(영어의 원래 의미는 float)를 추가하면 부모 상자 위에 떠 있는 자식 요소와 같습니다. 그것은 비어 있었습니다. 이제 우리가 해야 할 일은 그것이 줄어들지 않도록 하는 것입니다:

1. 오버플로 추가: 상위 요소에 숨김, 이 방법의 장단점은 방금 확인했습니다. SEO에 비우호적일 수 있지만 이 문제가 얼마나 심각한지는 경험해 본 적이 없습니다. , 그냥 이렇게 설명하고, 만나면 다시 수정하겠습니다.

.wrapper{width:50%;background: cornflowerblue;border:2px solid black;overflow:hidden;}

2. 하위 요소 아래에 빈 div를 추가합니다

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="wrapper"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box2"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box3"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box4"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">8</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

box4는 우리가 추가한 빈 요소입니다. (일부는 호환됩니다~ 일부는 호환됩니다~ 일부는 호환됩니다~ 사악한 IE6에서는 지원하지 않습니다. 기본 최소 높이)

<span style="color: #008080;">1</span> .box4{clear:both;height: 0;overflow: hidden;}

3. 플로트 지우기 목적을 달성하기 위해 의사 클래스 선택기를 사용합니다. 이것이 제가 작업에서 사용하는 방법이며 항상 작동합니다! (미안해요 지금 막 구덩이를 팠는데 아직도 그 구덩이 안에 있어요. 다시 해볼께요...)

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

글쎄요, 위와 같습니다. content: '.'; display:block;은 5개 주요 브라우저에 필수입니다. visible:hidden은 브라우저가 이를 구문 분석할 수 있도록 하는 데 사용되지만 사용자는 이를 볼 수 없습니다. 오.

---

원문, Snails on the Road를 재인쇄할 경우 출처를 밝혀주세요 [http://www.cnblogs.com/wowoniuzailushang]

동시 공개: http://blog.csdn.net/wowoniuzailushang CSDN