display none的元素重新展示如何撑开页面_关于元素的浮动你了解多少

        首先，在介绍什么是浮动之前我们先介绍一下html中元素的 普通流布局方式 。在普通流中，元素是按照它在 HTML 中的出现的 先后顺序自上而下 依次排列布局的，在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。如果没有特殊样式指定，所有元素默认都是按照普通流方式排列布局，即普通流中元素的位置由该元素在 HTML 文档中的位置决定的。  什么是浮动？                浮动使元素脱离文档普通流，漂浮在普通流之上的。浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。浮动会产生块级框(相当于设置display:block属性)。

       正是因为这种浮动的这种特性，所以本该属于普通流中的元素浮动之后，父级元素的高度就可能会发生变化(父级元素内部由于不存在其他普通流元素了，其高度就为0)，在实际应用中，会严重影响整体的布局。

所以我们需要使用清除浮动和闭合浮动来处理浮动带来的问题

        清除浮动：对被影响文档位置的块级元素添加属性clear：left | right | both | none;使其下移，直到元素两边没有浮动元素。指使用clear阻止这个元素盒子的边和前面的浮动元素相邻的行为；

        闭合浮动：是使浮动元素闭合，使父元素高度不再塌陷，高度被撑开了，使父元素能够包围浮动元素，从而减少浮动带来的影响。指避免float无法撑高父容器的默认行为

这是两者之间的区别：

闭合浮动的方法

1、添加额外的元素

main：wrap自己闭合浮动了，所以footer不用再清除浮动了(float:left)

side：我也浮动了(float:left)

footer：这次wrap人品爆发了, 通过在末尾添加了一个空标签，已经闭合浮动了

优点：简单，代码少，浏览器支持好，不容易出现怪问题

缺点：初学者不理解原理；如果页面浮动布局多，就要增加很多空div，代码语义化变差

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

2、使用伪类元素：新增.parent:after伪对象，其余不变

优点：浏览器支持好，不容易出现怪问题

.warp:after{          content: ".";/*生成一个元素内容为"."，为" "时也好用*/          display: block;/*让元素为块级元素*/          height: 0;/*用以下两种方式让元素不渲染*/          visibility: hidden;          clear: both;/*清除浮动*/    }

3、父元素设置overflow:hidden 

.wrap{        margin:0 auto;        width: 500px;        border: 2px solid #EA2C0A;        padding: 10px;        overflow: hidden;/*新增*/        zoom:1;/*新增，针对IE6，但没有经过测试*/   }//第二种，在parent容器中添加overflow：auto的属性，并针对于IE6增加zoom:1的属性。

优点：不存在结构和语义化问题，代码量极少。

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

4、父元素也设置浮动

        只需给parent容器添加 float：left，也可闭合浮动。

　　 优点：代码少

　　 缺点：会导致整个页面大部分都处于浮动状态，页面布局容易出现问题

        当然方法还有很多比如：display:table;改变盒模型属性。还有给父级元素添加position:absolute定位等方法。

说到底闭合浮动或者清楚浮动的原理主要就是这么两个原理：

• 通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；

• 通过设置父元素 overflow 或者display：table 属性等来闭合浮动，其实这是触发了Block formatting contexts (块级格式化上下文，简称 BFC)。块级格式化上下文是CSS可视化渲染的一部分。它是一块区域，规定了内部块盒的渲染方式，以及浮动相互之间的影响关系。

块格式化上下文(BFC)有下面几个特点：

       BFC就像一道屏障，隔离出了BFC内部和外部，内部和外部区域的渲染相互之间不影响。BFC有自己的一套内部子元素渲染的规则，不影响外部渲染，也不受外部渲染影响。

       BFC的区域不会和外部浮动盒子的外边距区域发生叠加。也就是说，外部任何浮动元素区域和BFC区域是泾渭分明的，不可能重叠。

       BFC在计算高度的时候，内部浮动元素的高度也要计算在内。也就是说，即使BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，高度是大于等于浮动元素的高度的。

       HTML结构中，当构建BFC区域的元素紧接着一个浮动盒子时，即，是该浮动盒子的兄弟节点，BFC区域会首先尝试在浮动盒子的旁边渲染，但若宽度不够，就在浮动元素的下方渲染。

现在我们再来分析一下overflow清除浮动的原理：

      当元素设置了overflow样式，且值不为visible时，该元素就建构了一个BFC。.warp因设置了值为auto的overflow样式，所以该元素建构出一个BFC，按照上面第三个特点，BFC的高度是要包括浮动元素的，所以.warp的高度被撑起来，达到了清除浮动影响的目的。overflow的作用就是为了构建一个BFC区域，让内部浮动的影响都得以“内化”。

      至于哪些情况下，元素可以建构出BFC，大家可以自行查看CSS文档对BFC的定义，这里就不再赘述了。