个人小结（前端）

本章内容为css中的float（浮动）

另有解决高度塌陷的几个方案

使用float脱离文档流

脱离文档流后下边的元素会立即向上移动，直到遇到父元素的边框或者其他的元素

如果浮动元素上边是一个块元素则不会超过块元素

浮动元素不会超过他的兄弟元素最多一边齐

浮动的元素不会盖住文字，通过文字设置文字环绕图片的效果

块脱离文档流后，高度和宽度被内容撑开

内联元素脱离文档流后变成块元素

将父元素的高度写死能避免高度塌陷的问题

BFC（Block Formatting Context）开启后

1. 父元素的垂直外边距不会和子元素重叠
2. 不会被浮动元素覆盖
3. 可以包含浮动的子元素

如何开启BFC

1. 设置元素的浮动

      2.  使用此种方式会导致父元素宽度的缺失

      3.  下方元素上移，不能解决

1. 设置元素的绝对定位
2. 设置元素为inline-block

         可以解决，但会导致宽度丢失

1. 将overflow设置为一个非visible的值（设置为hidden，副作用最小 ）

Clear属性也可以用来清除浮动元素对其他元素的影响

     可选值：

        none（不清除）

        left（左端不允许有浮动元素）

        right（清除右端）

        both（清除两端，对其影响最大的浮动）

解决高度塌陷方案

        添加一段空白的div

        由于这个div无浮动，所以它可以撑开父元素的高度

        然后都其进行清除浮动，这样可以通过空白的div来撑开父元素的高度

        基本没有副作用

（虽然可以解决，但会产生杂余）

通过after的伪类选中其后边

        <div class=”box1”>

        .box1：after{

           需要添加的内容

             content:”内容”;

           转换成块元素

             display:”block”;;

           清除两侧浮动

             clear:both;

通过在div最后添加空白的div，可以达到相同的效果

而且不会杂余，几乎没有副作用（推荐使用）

这种方案最优