Good programmers web front-end route to share learning CSS float - Clear Floating articles, why should clear the floating
Clear float talking about here, do not float, but to remove the impact between the float and the float. So in the end what impact it?
1. Height collapse
For example we look at.
We are here to set up div0 outer container, div1 is inside the container, div1 since set the width and height is 100 , so when the display is an orange 100 * 100 squares, but div0 only set the background color, because div unique exclusive line width automatically to 100% , the height of the inner container div1 softened, distraction height is 100 pixels, a green high see all 100 pixels, the width of 100% of the container
Now we give div1 set float
This time we find div0 the outer container is gone, out of sight. . Do not worry, we div0 play some characters look in
We found aaa these words came out, wrapped around the orange box, and for this reason we have explained in the float, and we also find green containers came out, but it is just the height of the high line of text. This indicates that the block is provided inside the floating orange, green its parent container does not know the height of the block container of orange, green and therefore the height of the container becomes 0 , after writing the text, the height of the green container re distraction before we can see. We call this condition is called the height of collapse .
We really hope that the contents of a container of constant distraction height of the container, so that we can follow-up content close to the top, while the content of Web pages are static not, many of them need to be updated daily, updated how much content, the picture height, not the same. So behind the things you want close to the above, the height above the content can not be set to a fixed value, otherwise a lot of time to fit the data. If you do not set the height, once you set up floating height collapse occurs. After the loss of height, page content will be inserted in the follow-up of the bottom of the above content, the page will be confusion, so we need to make clear the float to solve this problem, and ultimately do much even with floating outer container also because of the content automatic distraction height, not the height of collapse.
margin padding set value can not be displayed correctly
2. Margin and padding attribute values are incorrect
Since the float is provided between the lead parent child CSS padding , CSS margin value of the property can not be expressed correctly. Especially on the bottom of the padding and margin can not be displayed correctly.
To solve this problem, we must come to know about BFC
What is 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>
|