高度塌陷，清除浮动---CSS必备的盒子模型知识！

文档流

 

1、元素在文档流中的特点：

 

​     块元素：在文档流中独占一行；在文档流中默认宽度是父元素的100%，默认高度是被内容撑开。

 

​     内联元素：在文档流中只占自身大小，如果一行不足以容纳多个内联元素就会换到下一行继续从左向右排列；

 

​                       高度是被内容撑开的。

 

2、元素脱离文档流后，高度宽度都被内容撑开（内联元素脱离文档流后会变成块元素）。

 

 

浮动

 

1、块元素在文档流中默认垂直排列，若希望块元素在页面水平排列，则通过使用float使元素浮动脱离文档流。

 

2、元素脱离文档流后，他下边的元素会立刻向上移动。

 

3、元素浮动后会尽量往页面的左上或右上浮动，直到遇到**父元素**的边框

　　(body也算一个边框)或其他浮动元素。

 

​      浮动的元素会盖住文档流元素（若两者不是父子元素的关系）。

 

4、若浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素（独占一行）。

 

5、浮动元素不会超过它上边的兄弟元素（一行容不下所有浮动元素，则其他浮动元素会自动换行）。

 

 

高度塌陷问题

 

1、子元素无内容或浮动后，父元素高度坍塌，下面所有的元素都会往上顶，页面布局会混乱。

 

2、开启bfc的元素有以下特性：

 

​      a、父元素的垂直外边距不会和子元素重叠；

 

​      b、不会被浮动元素覆盖；

 

​      c、**可以包含浮动的子元素**。

 

3、如何开启（推荐）：给父元素添加overflow：hidden；

 

​      ie6以下浏览器不支持bfc，但可以通过开启haslayout来解决———将元素的zoom设置为1。

 

.box1{

 

​      zoom:1;

 

​    overflow:hidden;

 

}

 

 

高度塌陷解决方案

 

1、方案一：用clear清除其他浮动元素对当前元素的影响。

 

​      clear  可选值：none 不清除浮动；

 

​                              left：清除左侧浮动元素对当前元素的影响；

 

​                              right：清除右侧浮动元素对当前元素的影响；

 

​                              both：清除两侧浮动元素对当前元素的影响；

 

​                                           （实际上是清除对当前元素影响最大的那个元素的浮动）

 

2、方案二：在高度塌陷的父元素最后添加一个空白的div。

 

​         用这个空白的div来撑开父元素的高度再对其消除浮动。

 

​         对空白div有：clear:both;

 

 

模板

 

clearfix:after{ 

 

​        content:"";

 

​         display:block;

 

​        clear:both;

 

}

 

clearfix{

 

​      zoom:1;

 

}

 

<div class="boxn  clearfix">

 

<!--谁塌就给谁加clearfix-->