简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  CSS에서 수레를 지우는 방법은 무엇입니까? Clear 및 BFC 방법 소개

CSS에서 수레를 지우는 방법은 무엇입니까? Clear 및 BFC 방법 소개

青灯夜游
青灯夜游앞으로
2020-11-13 17:35:192924검색

CSS에서 수레를 지우는 방법은 무엇입니까? Clear 및 BFC 방법 소개

【추천 튜토리얼: CSS 동영상 튜토리얼】

float 속성은 CSS 레이아웃에서 자주 사용되지만, float 속성을 사용하면 일반 흐름에서 상위 컨테이너와 분리되므로 매우 고통스럽습니다

1 플로팅은 레이아웃 편의성을 제공하지만 새로운 문제도 가져옵니다

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Clear float</title>
    <style type="text/css">
        .container{
            margin: 30px auto;
            width:600px;
            height: 300px;
        }
        .p{
            border:solid 3px #a33;
        }
        .c{
            width: 100px;
            height: 100px;
            background-color: #060;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

우리가 바라는 효과는 이렇습니다

하지만 결과는 이렇습니다

부모 컨테이너가 플로팅되지 않습니다. 하위 요소가 둘러싸여 있습니다. , 일반적으로 붕괴라고 알려진 이 현상을 제거하려면 플로트를 제거하는 몇 가지 기술이 필요합니다.

2

2.1 float를 지우려면clear 속성을 사용하세요.

  • clear속성은 무엇인가요? Clear 속성은 요소의 어느 쪽이 다른

    이전플로팅 요소를 허용하지 않는지 지정합니다. 지금 바로 코드를 수정하세요

    <div class="p">
    <div class="c"></div>
    <div class="c" style="clear:left;"></div>
    <div class="c"></div>
</div>

    • 두 번째 div에
  • clear:both

    속성을 추가한 후 왼쪽에 있는 div( 첫 번째 div)는 더 이상 부동 상태가 아니므로 이후의 모든 div가 정지될 수 있습니다. 이를 사용하여 상위 컨테이너 끝에 빈 div를 추가하고 Clear:left 속성을 설정하여 목표를 달성할 수 있습니다. 2.1.1 빈 div를 추가하여 부동소수점 정리방금 만든 코드를 약간 수정하세요

    <div class="p">
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
    <div style="clear:left;"></div>
</div>
    • 즉, 상위 컨테이너 끝에 
<div style="clear:left;"></div>

를 추가하여 효과를 확인하세요

It 정말 작동합니다. 일부 학생들이 봤습니다. 이상하다고 느끼실 수 있습니다. 이전 예에서 두 번째 div를 왜 수정했나요? 

<div class="c" style="clear:left;"></div>
그런 효과가 없었나요?

저의 겸손한 의견을 말씀드리겠습니다. 속성은 왼쪽 div 자체의 플로팅 효과만 제거합니다. 이 효과는 왼쪽 div 또는 상위 컨테이너의 성능을 변경하지 않으며 상위 컨테이너의 관점에서 세 개의 div는 여전히 플로팅 상태이므로 높이는 여전히 축소됩니다. . 하지만 끝에 부동형이 아닌 div를 추가했습니다. 여기에는 clear:left 속성이 있으므로 부동형이 아닌 왼쪽 p에 따라 위치가 지정됩니다. 즉, 다음 줄과 상위 행에 위치하게 됩니다. 컨테이너는 부동이 아닌 것을 보게 될 것입니다. 일반 흐름의 하위 요소 요소가 컨테이너를 둘러싸게 됩니다. 이는 세 개의 부동 요소를 래핑하는 효과가 있으며 높이가 더 이상 붕괴되지 않습니다. 명확하게 설명되어 있거나 이 이해가 정확하다면 이해해 주시기 바랍니다) 지침).

물론 div를 추가하는 것 외에도 br과 같은 다른 html 요소를 추가할 수도 있습니다. 원칙은 동일하며 반복되지 않습니다.

2.1.2 CSS를 사용하여 요소 삽입

위 방법은 브라우저 호환성은 좋지만 효과를 변경하려는 목적을 달성하기 위해 페이지에 콘텐츠를 추가하는 즉, 데이터와 성능이 혼동되는 큰 문제가 있습니다 .수익화이므로 CSS를 사용하여 이 문제를 해결하는 방법을 알아보세요. 기본 방법은 마지막에 상위 컨테이너에 요소를 추가하는 것이지만 이를 수행하려면 CSS의 :after 의사 요소를 사용할 수 있습니다.

floatfix 클래스 추가

.floatfix:after{
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:left;
}
올바른 효과를 볼 수 있도록 이 클래스 

<div class="p floatfix">
    <div class="c">1</div>
    <div class="c">2</div>
    <div class="c">3</div>
</div>
를 상위 컨테이너에 추가하세요.

간단한 설명으로, floatfix 클래스를 상위 컨테이너에 추가한 후 새 클래스는 Visible 블록 요소를 추가한 다음 지금의 원칙과 유사하게 명확한 속성을 left로 설정합니다.

2.1.3 Master's handwriting

Nicolas Gallagher는 A new micro Clearfix hack

.floatfix:after{
    content:"";
    display:table;
    clear:both;
}

Nicolas Gallagher의 원본 기사에 다음과 같은 내용도 포함되어 있습니다. 이전에는 이 기사에 포함되지 않은 여백 겹침을 처리하는 것입니다. List it 밖으로.

일부 친구들은 위의 방법이 좋아 보인다고 제안했지만 IE6과 7이 의사 요소를 지원하지 않으면 어떻게 해야 할까요? 이를 위해서는 BFC/haslayout을 사용해야 합니다.

2.2

부모 컨테이너를 BFC로 만듭니다

며칠 전 정원에서 BFC에 대한 무차별 폭격이 있은 후, 모두가 BFC에 대해 어느 정도 이해하고 있다고 생각하지만 그렇지 않습니다. BFC는 세 가지 특징을 가지고 있습니다

.
  • BFC会阻止垂直外边距（margin-top、margin-bottom）折叠

    按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。

    因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。

  • BFC不会重叠浮动元素
  • BFC可以包含浮动

我们可以利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以，简单看看如何形成BFC

  • float为 left|right
  • overflow为 hidden|auto|scroll
  • display为 table-cell|table-caption|inline-block
  • position为 absolute|fixed

我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果

2.2.1 利用float来使父容器形成BFC

简单修改一下代码

<div class="p" style="float:left;">
    <div class="c">1</div>
    <div class="c">2</div>
    <div class="c">3</div>
</div>

这样我们可以得到结果

我们可以看到父容器高度没有塌陷，但是长度变短了，因为div应用float‘后会根据内容来改变长度，这个在很多时候很有用，但是我们不希望有这种效果怎么办？

2.2.2 使用BFC的其它局限

上面提到使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？难道要全部使用folat吗（确实有这种布局方式倒是）。BFC的几种方式都有各自的问题，overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的，display这几种方式依然没有解决低版本IE问题。。。

看起来还是第一种方式比较好，可是低版本IE该怎么办呢？

2.2.3 hasLayout

我们知道在IE6、7内有个hasLayout的概念，很多bug正式由hasLayout导致的，当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。我们可以利用这点儿在IE6、7下完成清浮动，先看看怎么使元素hasLayout为true

  • position: absolute 
  • float: left|right
  • display: inline-block
  • width: 除 “auto” 外的任意值
  • height: 除 “auto” 外的任意值
  • zoom: 除 “normal” 外的任意值
  • writing-mode: tb-rl

在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout为true

3 一个相对靠谱的解决方案

经过上面的比较我们可以得出一个相对靠谱的解决方案

  • 在IE+、现代浏览器上使用伪元素
  • 在IE6、7使用hasLayout

具体应该使用哪种方式来使元素hasLayout为true呢？相对而言zoom：1比较好，因为不会造成其它影响。想造成只在IE6、7上使用某些CSS的效果，我们还得需要一些CSS hack的知识，感兴趣同学可以看看 CSS hack，我们可以写出这样的CSS

.floatfix{
    *zoom:1;
}
.floatfix:after{
    content:"";
    display:table;
    clear:both;
}

4 最后

虽然我们得出了一种浏览器兼容的靠谱解决方案，但这并不代表我们一定得用这种方式，很多时候我们的父容器本身需要position：absolute等形成了BFC的时候我们可以直接利用这些属性了，大家要掌握原理，活学活用。总而言之清理浮动两种方式

  • 利用 clear属性，清除浮动

  • 使父容器形成BFC

更多编程相关知识，请访问：编程学习网站！！

위 내용은 CSS에서 수레를 지우는 방법은 무엇입니까? Clear 및 BFC 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：CSS에서 글꼴 획 효과를 얻는 방법다음 기사：CSS에서 글꼴 획 효과를 얻는 방법

관련 기사

더보기