是不是父元素是浮动元素，子元素也是浮动元素，父元素

（以下情况排除相对和绝对定位的情况）
第一，父元素不浮动，子元素不浮动，子元素内容可以填充父元素
第二，父元素浮动，子元素不浮动，子元素内容可以填充父元素
第三，父元素浮动，子元素浮动，子元素内容可以填充父元素
第一，父元素不浮动，子元素浮动，子元素内容不可以填充父元素

通过浮动可以使一个元素向其父元素的左侧或右侧移动，我们使用float属性来设置于元素的浮动

注意,元素设置浮动以后，水平布局的等式便不需要强制成立 。元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动

（2）设置浮动以后元素会向父元素的左侧或右侧移动，
（3）浮动元素默认不会从父元素中移出
（4）浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
（5）如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
（6）浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

实际上，浮动属性一开始创建出来的原因就是为了实现文字环绕的效果的，只是后来大家发现利用浮动可以很好地处理页面布局的问题，所以现在更多时候是利用它来做布局的功能。。。

我们知道，块元素和行内元素在文档流中都有着各自的布局特点，比如块元素独占一行等。那么如果脱离了文档流，块元素和行内元素分别会有什么样的影响呢？

1、块元素不在独占页面的一行
2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开

1、行内元素脱高文档流以后会变成块元素，特点和块元素一样

也就是说，一旦脱离文档流以后，我们就不需要再区分块和行内了。

我们可以看一下下面的案例，在没有使用 clear 属性前，对于两个兄弟元素，如果前者设置为浮动，那么由于其脱离了文档流，那么后者就会移动到前者原先的位置上。如果我们不想元素受到其他元素的浮动影响，那么就可以通过设置 clear 属性来解决这个问题。

clear底层实现的原理是：设置清除浮动以后，浏览器会自动为元素添加一个margin，以使其位置不受其他元素的影响

我们可以看下面这个案例，父 div 元素中包含着一个设置为浮动的 div 子元素，由于子元素设置为浮动，脱离了文档流，且父元素中没有指定高度，所以此时一旦子元素脱离了文档流后，就缺少了支撑起父元素高度的元素。相比于这样的效果，我们更希望即使子元素设置为浮动，但父元素依然可以包裹住子元素（或者说是有着子元素的高度，不至于塌陷）。

BFC(Block Formatting Context)块级格式化环境
BFC是一个css中的一个隐含的属性， 当元素开启BFC后，该元素会变成一个独立的布局区域 。可以理解为，此时元素内的后代元素不会再把其他样式传递到外面了。
元素开启BFC后的特点;
1开启BFC的元素不会被浮动元素所覆盖
2开启BFC的元素子元素和父元素外边距不会重叠
3开启BFC的元素可以包含浮动的子元素

可以通过一些特殊方式来开启元素的BFC
1、设置元素的浮动（不推荐)
2、将元素设置为行内块元素(不推荐)

需要注意的是，虽然开启元素的BFC环境可以解决高度塌陷的问题，但是这还不是最完美的解决方案，在某些特殊的环境下还是会有问题。

我们回顾一下，高度塌陷产生的原因是什么？主要是因为父元素没有设置高度，所以父元素的高度由子元素的高度决定，一旦子元素设置为浮动后脱离了文档流，那么此时父元素就会由于没有子元素的支撑而塌陷。
那么如果我们能够实现，手动在浮动的子元素后面放入一个无内容的块元素，且清除其受到的 float 影响，那么此时这个块元素就会落在浮动的元素下方，又由于（自身没有设置高度的）父元素的高度由子元素的高度决定，所以此时父元素因为要包裹新增的无内容块元素，也就自然可以包裹浮动的元素了。

所谓的clearfix样式，其实核心就是在第二种解决方式的基础上，对样式做一个进一步的封装，使其既可以解决高度塌陷的问题，还可以解决父子元素外边距重叠的问题。

最近无意间看到很多文章写overflow: hidden可以清除浮动，但大多并没有说明其原理。这里就介绍一下BFC。平时会利用BFC解决一些如清浮动，防止 margin 重叠等问题，但是BFC具体是什么，就感觉只可意会不可言传了，于是特地花了半天时间，查阅了一些资料和文章，记录一下自己的学习过程（其实在 《CSS盒子模型》 一文中已经提及一些知识，为了方便，这里特地重新开一篇文章，方便以后查阅）。

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

Box 是 CSS 布局的对象和基本单位，一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

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

1根元素
2float属性不为none
3position为absolute或fixed
4display为inline-block, table-cell, table-caption, flex, inline-flex
5overflow不为visible

根据第二部分的BFC布局规则第四个，我们只要让child2成为BCF就可以和child1不重叠；再根据第三部分生成BFC的元素的条件，可以为child2设置 display也可以设置overflow等等，可以达到如下图效果

达到了我们希望的自适应两栏布局。

到这里应该知道为什么overflow: hidden可以清除浮动；
第二本部分BFC布局规则第六：计算BFC的高度时，浮动元素也参与计算；
第三部分生成BFC的元素的条件第五：overflow不为visible。
具体例子可以参考我的这篇 《常见的清除浮动方法》 。

根据BFC布局规则第二：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。让child2和child3为不同的BFC的box就不会重叠了。

其实以上的几个例子都体现了BFC布局规则第五条：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

我想你用的是火狐吧。这里我就给你说下火狐和IE的区别吧，IE中的DIV高度即使你设成0PX，他的真实高也不会是0PX; 另外他的高度还会随着子元素的高度增加而增加，所以你在IE中是可以看到红色的DIV的。而在火狐中则相反，高度必须的指定，如果你不指定，那么在浮动时，他的高度就是0PX。所以你看不到红色的DIV，另外很多情况下，火狐和IE的效果不是一样的，特别是在用DIV布局的时候，DIV布局要求相当的高，一不注意就会出现放大缩写错位的问题。我通常都采用绝对定位和相对定位来布局，或者用table，希望能帮到你。

<div clas="a">　少了一个s　<div class="a">
类是具有相同属性元素的集合，既然a中每个都不一样，为什么还要统一定为a类呢？这是其一；
其二，父元素的高度是会随着子元素高度变化而变化的，所以一般在做页面的时候，我们是不设置这个高度的，除非有特殊要求；
其三，如果a类的其它属性都相同，只有宽度不同，可以同时让外层div具有两个类，例如：
<div class="a w1">
<div class="b">
</div>
</div>
<div class="a w2">
<div class="c">
</div>
</div>
<div class="a w3">
<div class="d">
</div>
</div>
其中a、w1、w2、w3都是类名，你可以在w1、w2、w3中定义不同的宽度，这样即满足了a中属性值全部相同，又满足了父元素具有不同宽度的要求。

定位有三种，其中absolute和fixed这两种和浮动都会使元素脱离文档流。
所以absolute和fixed会覆盖掉浮动的。
relative相对定位可以和float叠加，在float后的位置上再相对定位。

---