浮动元素

浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。

对父容器的影响：若父容器的子元素都是浮动元素，那么父容器会失去高度，在浮动元素之外，父容器没有包含住浮动的子元素。

对其它浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。

普通元素会认为浮动元素不存在，但会被浮动元素遮罩。

文字会环绕浮动元素。

清冲伍除浮动是让父元素在视觉上包围浮动元素。

.clearfix:after{

content:""

display:block

clear:left

}

六钟定位方式为：

BFC是块级格式上下文。其定义是：浮动、绝对定位（绝对定位、固定定位）元素、块级容器（如inline-block、 table-cell、table-caption）并不是块级盒子，还包括哪些overflow属性值取值visible以外的块级盒子，会为它们的内容物创建一个新的块级格式化上下文。对元素设置以下属性就可以生成BFC：

float: left | right

overflow: hidden | auto | scroll

display: table-cell | table-caption | inline-block

position: absolute | fixed

BFC的作用有：

（1） 解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。

（2） 清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。

在CSS中，散毕或两个或多个毗邻（父子元素或兄弟元素）的普通流中的块元素垂直方向上的 margin 会发生叠加。这种方式形成的外边距即可称为外边距合并；

对于父子元素来说，当容器没有padding和border时，内部的margin会引发外边距合并；

外边距合并指的是，数稿当两个垂直外边距相遇时，它们将形成一个外边距。

若两者都为正外边距以最大的外边距为准；

若存在负边距， 合并后的外边距为最大正外边距减去绝对值最大的负边距；

若无正外边距，则用0减去绝对值最大负边距。

用非空内容、padding、border 或 clear 让它们分隔开来；

将它们其中一个设置为浮动元素、inline-block 元素或绝对定位元素的。给个父子外边距合并的范例

在重合元素外包裹斗逗陆一层容器，并触发该容器生成一个BFC。

例子：

<div class="aside"></div>

<div class="text">

<div class="main"></div>

</div>

<!--下面是css代码-->

.aside {

margin-bottom: 100px

width: 100px

height: 150px

background: #f66

}

.main {

margin-top: 100px

height: 200px

background: #fcc

}

.text{

/*盒子main的外面包一个div，通过改变此div的属性使两个盒子

分属于两个不同的BFC，以此来阻止margin重叠*/指念

overflow: hidden //空顷此时已经触发了BFC属性。

} （BY三人行慕课）

---