좋은 프로그래머 웹 프런트 엔드 경로는 CSS 플로트 학습 공유 - 클리어 부동 기사

좋은 프로그래머 CSS 플로트 학습을 공유 할 수있는 웹 프런트 엔드 경로 - 클리어 부동 기사, 왜 부동을 취소한다

　　여기에 대해 이야기 지우기 플로트, 부유하지 않지만, 플로트 플로트의 영향을 제거 할 수 있습니다. 그래서 어떤 영향이 결국?

1. 높이 붕괴

　　예를 들어 우리가 봐.

　　우리는 설정 위치 Div0을 외부 용기를 div1는 컨테이너 내부에, div1 폭을 설정하고 높이 때문에 100 때문에 디스플레이가 오렌지 인 경우 100 개 * 100 개 사각형을하지만, Div0을은 만, 배경 색상을 설정 때문에 DIV 독특한 전용선 자동 폭 100 % , 내부 용기의 높이 div1가 연화 산만 높이가 100 픽셀, 녹색 높은 참조 모든 100 개 픽셀의 폭이 100 % 용기

　　이제 우리는 줄 div1의 설정 플로트

　　우리가 찾을 이번에 Div0을 외부 용기는 시야 밖으로 사라된다. . 우리가 걱정하지 마세요 Div0을 일부 문자가 보면 플레이

　　우리는 발견 AAA 이 단어는 오렌지 상자 감싸 나와서, 이런 이유로 우리는 플로트 설명했고, 우리는 또한 녹색 컨테이너가 나왔다 찾을 수 있지만, 텍스트의 높은 라인의 바로 높이입니다. 이 블록이 떠있는 오렌지 내부에 설치되어 있음을 나타냅니다, 녹색 부모 컨테이너 녹색 따라서 용기의 높이가된다 오렌지의 블록 컨테이너의 높이 모르는 공을 텍스트, 녹색 컨테이너 다시 산만의 높이를 작성 후를, 우리가 볼 수있는 전. 우리는이 조건이라고 부르는 붕괴의 높이를 .

　　우리가 추적 할 수 있도록 상단에 가까운 내용을 웹 페이지의 콘텐츠는 정적이지 동안 우리가 정말 그들 중 많은 업데이트, 매일 업데이트해야, 컨테이너의 일정 산만 높이의 컨테이너의 내용을 바란다 콘텐츠의 양, 그림 높이, 동일하지 않습니다. 그래서 위의 가까이에 원하는 일 뒤에 내용 위의 높이가 고정 된 값으로 데이터에 맞게 시간을 달리 많이 설정할 수 없습니다. 당신이 높이를 설정하지 않은 경우 사용자가 설정되면 부동 높이 붕괴가 발생합니다. 높이의 손실 후, 페이지의 함량이 상기 콘텐츠 하단의 후속 삽입됩니다 페이지는 우리가이 문제를 해결하기 위해 명확한 플로트를해야하고, 궁극적으로 심지어 때문에 콘텐츠도 외부 용기 부동 많은 일을, 그래서 혼란 될 것입니다 자동 산만 높이, 붕괴하지 높이.

마진 패딩 설정 값이 제대로 표시되지 않을 수 있습니다

2. 마진 과 패딩 속성 값이 잘못되었습니다

　　플로트가 리드 부모 자식 사이에 제공되기 때문에, CSS 패딩 , CSS 마진 속성의 값을 정확하게 표현할 수 없다. 특히 바닥에 패딩 과 마진이 제대로 표시되지 않을 수 있습니다.

　　이 문제를 해결하기 위해, 우리는에 대해 알게해야한다 BFC

무엇 BFC는

　　要来理解BFC，先介绍一下Box和Formatting Context

Box 是 CSS 布局的对象和基本单位，简单来说页面就是由Box组成，元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

1、block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block formatting context；

2、inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

3、run-in box: css3 中才有，这儿先不讲了。

　　Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

（1）内部的Box会在垂直方向，一个接一个地放置。

（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

（3）每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

（4）BFC的区域不会与float box重叠。

（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

（6）计算BFC的高度时，浮动元素也参与计算

瞧，最后一条就是我们需要利用的了，我们只需要利用BFC就可以解决浮动后外容器高度塌陷的问题

如何生成BFC

根元素是BFC模式

　　这种不能考虑，因为都不是根元素

设置高度

　　显然也是不可以的。

float属性不为none

　　本来就要设置浮动的。所以也不考虑

position为absolute或fixed

　　这样设置后，就失去浮动的意义了。因此也不使用

display为inline-block, table-cell, table-caption, flex, inline-flex

　　虽然可以开启，但是导致父元素原有宽度丢失

overflow不为visible

这种方法副作用比较小，但是还是有问题的。比如overflow设置为hidden，这个不行，内容的高度是撑开的宽度也不能确定。设置为scroll，会出现右边和下边的滚动条宽度

设置为auto最合适，不过，如果里面的内容使用了定位，并且超出去就会出现滚动条。所以只能保证内容不能有定位。

Clear:both

　　清除：两者间，顾名思义就是清除浮动

　　我们看到如果要使用clear:both，就需要给高度塌陷的容器里面最后追加一个div，并且给这个div设置为clear：both，我们发现这种使用方法比较麻烦，每次设置都需要最后增加div。

　　因此我们做了一个修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div0
        {

            background-color: greenyellow;
        }
        #div1
        {
            width: 100px;
            height: 100px;
            background-color: orange;
            float: left;
        }
        /*在外容器的里面最后添加内容*/
        .clearFloat:after
        {
            content: "";/*添加一个空字符串*/
            display: block;/*设置这个空字符串是一个块，这样会独占一行*/
            height: 0;/*设置这个添加的空字符串的高度是0*/
            visibility: hidden;/*不让这个空字符串显示*/
            clear: both;/*清除浮动*/
        }
        .clearFloat
        {
            zoom: 1;/*IE6以下的浏览器也可以利用这种方式清除浮动*/
        }
    </style>
</head>
<body>
    <div id="div0" class="clearFloat">
        <div id="div1"></div>
    </div>
</body>
</html>