css 高度塌陷_CSS中的浮动、高度塌陷以及清除浮动

一、CSS浮动

浮动(float)的框可以左右移动，直至它的外边缘碰到包含框或另一个浮动框的外边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级元素的布局而只会影响内联元素(通常是文本)的排列，文档中的普通流就表现得如同浮动框不存在一样。当浮动框高度超出包含框的时候，就会出现包含框不会自动升高来闭合浮动元素(“高度塌陷”现象)。

*{margin:0;padding:0;

}.container{width:300px;height:156px;border:1px solid blue;margin:100px;

}.block1{width:50px;height:50px;border:1px solid red;

}.block2{width:50px;height:50px;border:1px solid red;

}.block3{width:50px;height:50px;border:1px solid red;

}

块1