css float属性的学习小结

什么是float

我们平时最常见的float的形式是在word中对图片的文字环绕。如图

而在网页中要实现这种效果就需要使用到float属性。

我对float的理解

设置有float属性的元素会脱离父元素形成一块适应其内容的区域，浮动元素外的所有内容会围绕浮动元素的margin边界显示。

观点验证

Case 1：未设置高度无内容的父容器（wrapper）中包含一个200px长宽，float：left的元素（floatbox）。

Result：高度塌陷，floatbox覆盖在父容器左侧区域，由于父容器无内容，因此floatbox显示在左侧，wrapper只显示2px的上下边框。

 

Case 2: wrapper内包含超过200px高度的内容（inline-box）。

Result：由于wrapper中的内容高度已高于floatbox的高度，因此文本围绕floatbox显示。

 

Case 3: 将floatbox高度设为400px，新建一个包含内容的wrapper。

Result：由于floatbox的高度已超出wrapper，两个wrapper中的文本都围绕floatbox显示。

Case 4：wrapper中的内容创建一个包含内容的块级元素(block-level element)

Result：floatbox覆盖在块级元素之上，但是box中的内容依然围绕floatbox显示。