CSS学习笔记04

17、浮动的简介

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
float:none、left、right

浮动的特点：

1. 脱离文档流。 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

2. 向左/向右浮动直到遇到父元素或者别的浮动元素。

3. 浮动会导致父元素高度坍塌。

4. 浮动元素不占空间

5. 浮动以后的元素都可看成inline-block
注：浮动的元素会脱离文档流，但是还是会在其父元素内部移动

18、高度塌陷与BFC

父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0）

方案一：给父元素一个固定的高度

缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，