css에서 부동 문제를 신속하게 해결합니다

-- css의 부동 제거 문제를 신속하게 해결
부동을 왜 제거합니까?
하위 상자에 부동이 설정되어 있으면 부모 상자의 높이가 설정되지 않고 부동의 하위 요소가 공중에 떠다니기 때문에(표준 흐름에서 벗어나기) 하위 상자는 부모 상자를 벗어나 부모 상자의 높이가 0이 됩니다.
부동을 어떻게 제거합니까?어떤 방법이 가장 좋아요?
첫 번째:
아바타 상자에 고정 높이를 설정합니다. 아바타 상자가 부동하면 표준 흐름에서 벗어나 아버지께 고정 높이를 설정하면 아바타 상자가 고정되어 죽습니다. 그런데 밑에 많은 내용이 있으면 어떻게 합니까?그래서 이 방법은 엄격하지 않고 융통성이 없다.
두 번째:
마지막 부동 서브 요소 뒤에div 라벨을 붙이고,div 설정clear:both 스타일: 이런 방법도 부동을 제거할 수 있지만, 사용하는 것을 추천하지 않습니다.
세 번째:
부모 요소에 오버플로우:hidden을 추가합니다. 이런 방법도 부동을 제거할 수 있습니다. 오버플로우:hidden;부동을 제거할 수 있을 뿐만 아니라 넘치는 숨겨진 문제도 해결할 수 있고 바깥쪽 거리의 무너진 문제도 해결할 수 있다. 그러나 이런 부동을 제거하는 방법도 좋지 않다. 부모 요소에 오버플로우:hidden을 첨가했기 때문에 부모 요소도 넘치는 숨겨진 문제를 설정했다. 그러나 이것은 우리가 보고 싶지 않은 것이다.이런 방법은 적용되지 않는다.
네 번째:
애프터 위조 요소를 사용하여 부동을 제거하고 위조 요소는 인덱스를 쓰는 것이 가장 좋습니다. 인덱스 호환성이 비교적 좋기 때문입니다(추천합니다)

    .clearfix:after{/*                    */
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6        *   IE6-IE7  ,        */

다음은 큰 상자 안에 두 개의 하위 상자를 끼워서 부동을 제거하는 네 가지 방법을 검증하는 것이다. Document

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

좋은 웹페이지 즐겨찾기