今天完成的事情：

·浮动元素的高度

-标准流中元素高度可以撑起父元素的高度

-浮动流中浮动的元素不能撑起父元素的高度

·浮动元素高度的问题

-清除浮动的方式一：给前面一个父元素设置一个高度，但是用的很少

-清除浮动的方式二：给后面的盒子设置clear属性，left/right/both，添加clear之后，盒子margin失效，没有margin了

-清除浮动的方式三：隔墙法，不常用

-外墙法：两个盒子间设置一个空盒子，加上clear： both； 外墙法可以让第二个盒子的margin-top，不能让第一个盒子设置margin-bottom

-内墙法：第一个盒子中元素最后设置一个空盒子，加上clear： both； 外墙法可以让第二个盒子的margin-top，可以让第一个盒子设置margin-bottom

-清除浮动的方式四：通过伪元素选择器给box1设置一个空的块级元素，设置clear;both属性，设置visibility：hidden，隐藏，还要注意ie6并不兼容，需要加一个css

.Box1：：after｛

Content：“”；

Display：“”；

Height: 0 “”;

Visibility:hidden;

Clear:both;

｝

.box1{

/*兼容ie6*/

*zoom:1;

}

·清除浮动的方式五：overflow：hidden； 可以将超出标签范围的内容裁剪掉，也可以清除浮动（还要加*zoom:1;），可以通过overflow：hidden；让里面的盒子设置margin-top后，外面的盒子不被顶下来（解除坍塌）

  ·清除浮动的方式六：设置父元素浮动，但是父元素的宽度就不会是auto了。 跟overflow一样都是利用bfc的特性。

`BFC:块格式化上下文

块格式化上下文（BFC）有下面几个特点：

· 内部的块级元素会在垂直方向，一个接一个地放置；

·  块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；

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

·  BFC的区域不会与float box重叠；

·  BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；

·  计算BFC的高度时，浮动元素也参与计算。

·如何创建一个bfc

一个BFC可以被显式触发，只需满足以下条件之一：

·float的值不为none；

·overflow的值不为visible；

·position的值为fixed / absolute；

·display的值为table-cell / table-caption / inline-block / flex / inline-flex。

当元素设置了overflow样式，且值不为visible时，该元素就建构了一个BFC。在我们的例子中，盒子因设置了值为auto或者hidden的overflow样式，所以该元素建构出一个BFC，按照第7个特点，BFC的高度是要包括浮动元素的，所以盒子的高度被撑起来，达到了清除浮动影响的目的

那么只要能构建BFC就能达到清除浮动的原理，设置display：inline-block；能设置bfc，所以他也能清除浮动，同理其他的也一样。但是最常用的是overflow

·伪元素选择器：给指定标签的内容前、后添加一个子元素、

标签名称::before{

Content: “你好” ；

}

标签名称：：after｛

Content：“你好” ；

｝

明天计划的事情：

html，css大部分都复习了一边，继续做任务。在任务中熟练。

遇到的问题：

准备去上海线下，没有宿舍，坑！

收获：

复习