Float 속성에 대한 심층적인 이해 및 적용

1. 플로트 기능

1. 그림 주위에 텍스트 적용

2. 블록 수준 상자 만들기

3.

4. 플로팅 요소의 너비와 높이는 가변적이지만 해당 값은 설정할 수 있습니다.

2. 핵심 해결 문제

이미지를 둘러싼 텍스트: img 태그와 여러 텍스트 레이블이 컨테이너에 배치됩니다. img가 부동하는 경우 텍스트 레이블이 이미지를 둘러쌉니다.

<img src="../img/a.jpg"   style="max-width:90%" alt="">
        <p>001文件内容文件内容文内容文件内容<br/>
        文件内容文件内容文件内容文件内容文件内内容文件内容<br/>
        文件内容文件内容文件内容文件内容文件内容<br/> 
        文件内容文件内容文件内容文件内容文内容文件内容文件内容<br/>
        <p>p标签文件内容文件内容文件内容文件内容文件内容文容文件内容文件内容文件内容</p>
        <div>Div标签文件内容文件内容文件内容文件内容文件内容文件内容</div>
        文件内容文件内容文件内容文件件内容文件内容文件内容<br/>
        文件内容文件内容文件内容文件内容文件内容文件内容文件内容文件内容<br/> 
        文件内容文件内容文件内容文件内容文件内容文件内内容文件内容<br/>
        文件内容文件内容文件内容文件容文件内容文件内容<br/>
        文件内容文件内容文件内容文件容文件内容文件内容<br/>
        </p>

2.1 이것이 문제입니다

플로팅 요소가 일반 요소에 인접해 있고 플로팅 요소와 플로팅 요소 사이에 명확한 플로트가 없습니다. 일반 요소입니다. 일반 요소는 플로팅 요소로 덮여 있지만 포함된 콘텐츠는 플로팅 요소 주위에 표시됩니다.

<div style="width: 100px; height: 200px; background: red;float: left;" >001</div> 
<div style="width: 100px; height: 200px; background: gray;float: none;" ><p>002</p></div>

001은 뜨고, 002는 뜨지 않지만, 002 요소 자체는 001에 가려져 있지만 내용은 001 부근에 표시됩니다.

3. 비핵심 및 주요 응용 분야

열 레이아웃: 먼저 블록을 가로로 정렬한 다음 초과 부분에 대해 새 행을 시작합니다.

주요 기능

1. 부모 키 붕괴(이것도 심각한 문제입니다)

.wrap{
           background:red; 
           padding:10px;
           width:auto;
        }
        .left{
            background:gray;
            width:200px;
            height:100px;
            float:left;
        }
        .right{
            background:yellow;
            width:100px;
            height:100px;
            float:left;
        }

<div class="wrap">
        <div class="left">left</div>
        <div class="right">right</div></div>

2 . 너비와 높이는 가변 하위 요소가 되지만 너비와 높이 설정은 유효합니다

.wrap{
           background:red; 
           padding:10px;
           float:left;
        } 
        .left{
            width:100px;
            background:gray;
        }
        .right:{
            width:200px;
            background:yellow;
        }

<div class="wrap">
        <div class="left">left</div>
        <div class="right">right</div></div>

2. 높이 붕괴 문제 해결

우선 BFC와 IFC의 두 가지 기본 개념을 이해해야 합니다. 브라우저 렌더링과 밀접한 관련이 있기 때문입니다.

1.BFC(블록 수준 서식 컨텍스트)

독립적으로 렌더링되는 영역으로, 영역이 내부적으로 어떻게 배치되는지 규정하며, 외부와는 아무런 관련이 없습니다.

1.1 내부 상자는 세로로 하나씩 배치됩니다.

1.2 상자의 세로 거리는 여백에 의해 결정되며, 상자에 속하는 인접한 두 상자의 여백은 다음과 같습니다. 동일한 BFC가 겹칩니다

1.3 BFC 영역은 float와 겹치지 않습니다

.head{
            background:pink;
            margin: 20px 0px;
            height:100px;
        }
        .wrap{
           background:red; 
           padding:10px;
           margin:20px 0px;
           overflow:hidden;
        } 
        .left{
            width:100px;
            background:gray; 
            margin:10px 0px;
        }
        .right:{
            width:200px;
            background:yellow;  
            margin:20px 0px;
        }

<div class="head">head</div>
    <div class="wrap">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

상단과 하단 사이에 20px 여백이 있습니다. head 및 .wrap의 상자. 그러나

.head와 .left 사이에 겹침이 발생했습니다. .head에는 20px 여백이 있고 .wrap은 BFC( 오버플로를 생성하므로 겹침이 없습니다. :숨겨진).

1.4 각 상자의 왼쪽 여백은 테두리 상자의 왼쪽(오른쪽과 동일)과 접촉하며 플로트도 마찬가지입니다

2. 행 수준 서식 지정 컨텍스트)

상자는 포함 블록의 상단부터 시작하여 수평으로 하나씩 배치됩니다. 가로 여백, 테두리, 패딩이 차지하는 공간을 모두 합친 것입니다(디스플레이는 인라인, 인라인 블록이며 인라인 특성을 갖는 요소는 다음과 같은 특징을 가집니다). 규칙은 다음과 같습니다.

2.1 너비와 높이를 지정할 수 없습니다

2.2 세로 방향에서는 Margin, Padding, Border를 사용할 수 없습니다

2.3 왼쪽 라인 상자는 포함 블록의 왼쪽에 가깝고 라인 상자의 오른쪽은 포함 상자의 오른쪽과 같은 높이이며, 포함 블록의 가장자리와 라인 사이에 부동 소수점을 삽입할 수 있습니다. 상자.

2.4 인라인 상자의 높이는 line-height에 따라 결정됩니다.

이 섹션의 예는 디스플레이 장의 인라인 요소를 참조하세요.

3. 솔루션

은 주로 BFC 원리를 기반으로 구현되는데, BFC는 전체 영역을 렌더링하고 너비와 높이도 계산하기 때문입니다. 이것은 또한 float를 지우는 전설적인 솔루션입니다

3.1 상위 컨테이너에 BFC를 생성하는 방법

3.1.1 BFC를 생성하는 방법

a) Float 값 이외의 없음

b) 표시 이외의 오버플로 값

c) 표시 값은 table-cell, table-caption, inline-block, flex, inline-flex 등입니다. .

d) 위치 값은 절대값, 고정

e) 필드셋 요소

3.1.2 부동소수점 지우기

  a) Float、overflow、display三种方式都可以清除浮动，但position、fieldset虽然创建了bfc但不可以清除浮动（也就是不能解决高度塌陷的问题）。主要原因为：position、fieldset都需要子元素来撑开父容器的高度，但子元素浮动后又不存在高度，所以失效。

  b) Float、overflow、display示例代码:

.wrap{
            background: gray;
            padding: 10px;
            overflow: auto;
        }
        .left, .right{
            background: red;
            float: left;
            width: 200px;
            height: 100px;
        }
        .right{
            background: yellow;
        }
        .footer{
            background: pink;
        }

<div class="wrap" >
        <div class="left">left</div>
        <div class="right">right</div>
    </div><div class="footer">footer</div>

3.1.3 最后一个子元素clear:both

利用clear:both触发父容器重新计算高度的原理实现，示例代码如下：

.wrap{
            background: gray;
            padding: 10px; 
        }
        .left, .right{
            background: red;
            float: left;
            width: 200px;
            height: 100px;
        }
        .right{
            background: yellow;
        }
        .footer{
            background: pink;
        }
        .clear{
            clear: both;
            zoom: 1;
        }

<div class="wrap" >
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="clear"></div>
    </div>
<div class="footer">footer</div>

3.1.4 After添加最后一个子元素

利用css的:after伪元素实现，动态插入元素并清除浮动：

.wrap{
            background: gray;
            padding: 10px; 
        }
        .wrap:after{
            content: '';
            display: block;
            overflow: hidden;
            clear: both;
        }
        .left, .right{
            background: red;
            float: left;
            width: 200px;
            height: 100px;
        }
        .right{
            background: yellow;
        }
        .footer{
            background: pink;
        }

<div class="wrap" >
        <div class="left">left</div>
        <div class="right">right</div> 
    </div>
    <div class="footer">footer</div>

4. 总结

1. 利用bfc方式清除浮动，简单、浏览器支持良好，但在IE6-版本支持存在问题。但是存在以下局限性，要适环境而用：

    a) Overflow方式：滚动条会被隐藏，如果子内容超高则存在显示不全的问题；

    b) Float方式：让父容器浮动，那么就存在对父容器同辈元素的影响；

    c) Dipslay方式：让父容器变为table或者flex等，都存在不明确的影响，大家都不推荐使用。

2. 最佳解决方案：利用:after添加一个伪元素并给予clear:both和zoom:1来实现清除浮动，兼容性好，对环境影响最小。