CSS에서 수레를 지우는 방법은 무엇입니까? Clear 및 BFC 방법 소개-CSS 튜토리얼-php.cn

<!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.1 float를 지우려면clear 속성을 사용하세요.

clear속성은 무엇인가요? Clear 속성은 요소의 어느 쪽이 다른
이전플로팅 요소를 허용하지 않는지 지정합니다. 지금 바로 코드를 수정하세요
```
<div class="p">
    <div class="c"></div>
    <div class="c" style="clear:left;"></div>
    <div class="c"></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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1672

Cakephp 튜토리얼

1428

라라벨 튜토리얼

1332

PHP 튜토리얼

1276

C# 튜토리얼

1256

Related knowledge

Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

부트 스트랩에 사진을 삽입하는 방법 Apr 07, 2025 pm 03:30 PM

Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.

부트 스트랩에 분할 라인을 작성하는 방법 Apr 07, 2025 pm 03:12 PM

부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.

부트 스트랩을위한 프레임 워크를 설정하는 방법 Apr 07, 2025 pm 03:27 PM

부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.