HTML5-个人对浮动的理解

Float的基础知识

• 会使元素向左或者向右移动，不能上下

• 浮动原色碰到包含框或者另一个浮动框，浮动停止

• 例子1：

• 

• 向做浮动时，浮动会飘到父容器边上就停止。222这个盒子向左浮动后，碰到333这个盒子时，停止浮动；

• 注意：漂浮会把文字往边上挤，所以222不能覆盖333文字区域。

•  

• 浮动元素之后的元素将围绕它，之前的不受影响

• 浮动元素会脱离标准流

•  

• 高度塌陷问题，举例，解决办法

• 浮动溢出

• 父容器中元素全漂浮，父容器则不知所措，出现浮动溢出。为了让我们能看到浮动溢出现象，我们为盒子们加了container，以及黑色边框。图中黑色边框塌陷。

• 

• 以至于后面普通流中元素会与container内的元素重合。

• 清除浮动

• 措施：container设高度
  如果动态网页从数据库取数据，我们不知道数据获取后占的高度，修改页面会比较麻烦
  所以推荐后面的方法。

• 清除浮动的方法

• 方法1：在浮动元素后使用一个空元素，然后设置样式clear: both

• clear的意思是，清除float对左、或者右边元素影响

• clear也可以理解为抗浮动，只影响自身，不影响相邻元素

• 方法2：在浮动元素的容器（父元素）添加样式 overflow: hidden;

• overflow：消掉溢出的部分

•  方法3：.clearfix:after｛

    content: "."; display: block; height: 0; visibility: hidden; clear: both;}

                          .clearfix { *zoom: 1;}