CSS 3(플로팅 테마 지우기)

1. 플로팅에 대한 세 가지 개념

플로팅 플로트 없음:없음;

주변 플로팅 요소 지우기 float:both 플로트 지우기의 원래 의도입니다

자식 요소의 플로팅을 지우는 것이 부모 요소 클리어픽스에 미치는 영향 많은 사람들은 이것을 플로팅 지우기라고 이해합니다. .

2. 클리어 플로트란

플로트를 지워도 현재 라벨의 플로트는 지워지지 않습니다. 그렇다면 플로트를 추가하는 이유는 무엇인가요?

실제로 플로트를 클리어한다는 것은 현재 요소 옆에 떠 있는 요소를 클리어하는 것을 의미합니다. 그러나 현재 요소는 다른 요소에 영향을 미칠 수 없으므로 도망가게 됩니다.

3. 왜 명확하게 뜨는가

레이아웃 중에 특정 콘텐츠를 가로로 배열할 수 있기를 바라는 경우가 많습니다. 가로 배열 후에는 내부 콘텐츠의 불확실성으로 인해 높이에 단순히 고정된 값을 부여할 수 없습니다. 높이가 지정되지 않고 하위 요소가 부동하는 경우 하위 상자의 지원이 없기 때문에 상위 상자가 축소됩니다.

클리어 플로팅 기능을 사용하면 상위 요소의 마지막 비플로팅 상자에 대해 Clear:both를 사용하여 상위 상자의 높이를 지원하고 내부 콘텐츠의 변경에 따라 높이를 변경할 수 있습니다.

4. 뜨는 방법을 알아두세요

4.1. 추가 태그 방법

원리: 플로팅 요소 아래에서 실행하려면 단일 태그와 클리어: 둘 다를 사용하여 플로팅 하위 상자로 인해 발생하는 상위 상자 붕괴를 제거합니다.

대표 웹사이트: Jingdong

장점: 이해하기 쉽고 익히기 쉽습니다

단점: 의미 없는 빈 태그가 많이 추가되어 구조와 성능 분리 원칙을 따르지 않으며 향후 유지 관리에도 도움이 되지 않습니다

4.2. 상위 요소 세트 오버플로: 숨김

원리: 부모 상자가 BFC를 형성하도록 합니다. BFC의 특징 중 하나는 부동 요소를 전달할 수 있다는 것입니다.

　장점: 구조적, 의미적 문제가 없으며 코드의 양이 매우 적습니다

　단점: 내용이 많아지면 줄 바꿈이 자동으로 발생하기 쉽고 내용이 숨겨지기 쉽고, 오버플로가 필요한 요소를 표시할 수 없습니다

4.3. 단일 의사 요소

　　   .clearfix:after {<br>　　　　　　　　content: "";<br>　　　　　　　　height: 0;<br>　　　　　　　　visibility: hidden;<br>　　　　　　　　overflow: hidden;<br>　　　　　　　　dispaly: block;<br>　　　　　　　　clear: both;<br>　　　　}<br>
　　　　.clearfix {<br>　　　　　　　　zoom: 1;/*IE67*/<br>　　　　}

일반적인 웹사이트: Sina, NetEase

　4.4 이중 의사 요소

.clearfix 소개

　　　　.clearfix:before, .clearfix:after {<br>   　　　　　　 content: "";<br>    　　　　　　display: table;<br>
　　　　}/*在有该类的元素<strong>内部元素</strong>的前面和后面添加元素*/

　　　　.clearfix:after {<br>　　　　　　　　clear: both;<br>　　　　}/*只要after两侧有浮动元素，after就会跑到最下面，从而撑开带有该类名的父盒子*/<br>　　　　.clearfix {<br>　　　　　　　　*zoom: 1;<br>　　　　} /*用于兼容IE/7/6*/

display:block에 공백이 있으므로 display:table을 사용하세요

여백 병합을 방지하기 위해 before가 추가됩니다.

　　대표적인 웹사이트: Xiaomi, Taobao