良いプログラマ学習CSSフロートを共有するためのWebフロントエンドルート-クリアフローティング記事、なぜ浮動をクリアする必要があります
ここで話しクリアフロート、フロートませんが、フロートとフロートとの衝突を削除します。だから何の影響も最終的には？
1。身長崩壊
たとえば、私たちは見てください。
私たちは、セットアップするためにここにいる DIV0 外容器を、DIV1は、容器の内部にある、DIV1 幅を設定し、高さがあるので、100 ので、表示がオレンジ色であるとき、100×100個の正方形を、しかしDIV0はのみ、背景色を設定するためのdiv ユニーク自動的に専用線幅は100％に、内側容器の高さDIV1が軟化し、伸延高さは100個のピクセル、緑の高いすべての参照100個の画素、幅100％容器を
今、私たちは与える DIV1のセットフロートを
今回は見つける DIV0 視界の外、外容器がなくなっています。。心配しないで、我々はDIV0 いくつかの文字を再生中に見えます
我々が見つかりました。 AAA これらの言葉は、オレンジ色のボックスに巻き付け、出てきた、そしてこのような理由のために、私たちはフロートで説明している、と我々はまた、緑色のコンテナが出てきたが、それはテキストのハイラインのちょうど高さを見つけます。これは、緑、ブロックフローティングオレンジの内部に設けられていることを示している親コンテナがオレンジ色のブロックコンテナの高さを知らない、緑ため、コンテナの高さになり0 テキストを書いた後、気晴らし再緑の容器の高さ私たちが見ることができる前に。私たちは、この条件が呼ばれる呼び出す崩壊の高さ。
我々はフォローアップできるように、トップに近いコンテンツをWebページのコンテンツは静的ではありませんしながら、私たちは本当に更新され、それらの多くは毎日更新される必要があり、コンテナの一定の伸延高さの容器の中身ことを願っていますどのくらいのコンテンツ、画像の高さ、同じではありません。ですから、上記の近くに欲しいものの後ろに、コンテンツ上の高さは、固定値にデータを合わせて、時間のそれ以外の多くを設定することはできません。あなたは、高さを設定しない場合は、設定した後、浮上の崩壊が起こります。高さの喪失後、ページコンテンツが上記コンテンツの下のフォローアップに挿入されます、ページが混乱になりますので、我々はこの問題を解決するためのフロートを明確にする必要があり、最終的にさえもあるため、コンテンツの浮遊外容器とあまりやります自動伸延高さ、崩壊のない高さ。
マージン、パディングの設定値を正しく表示することができません
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>
|