深入理解CSSfloat属性是CSS中常用的属性。在实际工作中用的很多。如果使用不当，会出现意想不到的效果。虽然很多人说浮动可以用，浮动已经过时了，但是优秀的前端开发人员需要有“追根究底”的精神，才不会在出现一些问题的时候“手忙脚乱”！所以，今天我就专门对float属性进行整理和总结。一、float简介float属性在CSS界是一个非常古老的属性。设置了浮动属性的元素将根据设置的属性值向左或向右浮动，直到其外边缘接触到包含框或另一个浮动到框架的边界。设置了浮动属性的元素会从正常的文档流中分离出来，相当于不占用任何空间，所以正常流中的元素在文档中的表现就好像浮动元素不存在一样。因此，设置浮动属性会影响我们的页面布局。具体来说就是让block元素忽略float元素，让inline元素像流水一样包围float元素，实现浮动布局。float属性设计的初衷：就是让文字像流水一样围绕着漂浮的元素，如下图：2.float的特点float有哪些有趣的特点？具体情况如下：包覆、高度塌陷、块状，无任何边缘合并。下面将详细解释这些点的含义。2.1封装所谓“封装”，其实是由“封装”和“自适应”两部分组成。假设有如下CSS代码：/*CSScode*/.father{border:1pxsoliddeeppink;宽度：200像素；}.son{浮动：左；字体大小：0；边框：1px纯蓝色；padding:5px;}.fatherimg{width:128px;}1)包装。本例中浮动元素的父元素宽度设置为200px，浮动元素的子元素为一张图片，宽度为128px。这时候浮动元素的宽度被“包裹”了，也就是里面图片的宽度是128px。/*HTML代码*/
