float属性设置：
1，left--元素向左浮动
2，right--元素向右浮动
3，none--默认值。元素不浮动。
总结：
给谁添加了float，就将谁脱标，后面的内容会顶上来显示。
如果顶上去以后，脱标的内容没有改变位置，就会出现后者被前者（拖标内容）覆盖的情况。
如果没有改变位置，就出现该在的地方。
1，float的崩溃
当父元素没有设置高度的情况下，将子元素设置为浮动（float）父一级的块级元素高度
发生破坏（又称为破坏，崩塌）
div-->在没有设置高度和宽度的情况下：
高度为：div内内容的高度
宽度：为父一级的宽度
2，float的包裹性
包裹性：当div设置浮动后 宽度会自适应其内容的宽度。
块级元素默认宽度就是父级元素的宽度，div设置为float 产生包裹特性
行级元素都会出现块级元素包裹多出（基准线）
解决：
1）将img转换为块级元素 vertical-align:bottom
2）垂直对齐方式：底部对齐；行级元素转块级元素
<html>
<head>
<style type="text/css">
div{
background-color: yellow;
float: left;
}
img{
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
<img src="image/3.jpg"/>
</div>
</body>
</html>
3，使用float进行图文混排
float的设计初衷-->实现图文混排（环绕方式），文字和矩形区域，能够进行环绕排列
随着技术进入-->例如用于商品列表并排显示
<html>
<head>
<style type="text/css">
div{
background-color: yellow;
float: left;
}
img{
vertical-align: bottom;
}
p{
text-align: justify;
line-height: 20px;
}
</style>
</head>
<body>
<div>
<img src="image/3.jpg"/>
</div>
<p>
包裹性：当div设置浮动后 宽度会自适应其内容的宽度。
块级元素默认宽度就是父级元素的宽度，div设置为float 产生包裹特性
行级元素都会出现块级元素包裹多出（基准线）
解决：
1）将img转换为块级元素 vertical-align:botom
2）垂直对齐方式：底部对齐；行级元素转块级元素
</p>
</body>
</html>
<html>
<head>
<style type="text/css">
div{
background-color: white;
float: left;
}
img{
vertical-align: bottom;
float: left;
}
p{
text-align: justify;
line-height: 20px;
}
</style>
</head>
<body>
<div>
<img src="image/3.jpg"/>
<p>
包裹性：当div设置浮动后 宽度会自适应其内容的宽度。
块级元素默认宽度就是父级元素的宽度，div设置为float 产生包裹特性
行级元素都会出现块级元素包裹多出（基准线）
解决：
1）将img转换为块级元素 vertical-align:botom
2）垂直对齐方式：底部对齐；行级元素转块级元素
</p>
</div>
</body>
</html>
4，float清除浮动
一，需要清除浮动的原因：
1，为了父元素不会出现“高度崩塌”
2，如果强制规定了外层容器的尺寸，则显得就不那么灵活了，高度就就不能自动适应了
（以后的数据，大多都是从后台获取的，这样内容的多少和版本就会不一致）
3，从某个元素开始我们不再需要浮动效果了。
方法一：
清除浮动代码-->clear: both（right and left）;-->表示清除元素之前的浮动，如果本元素之后还有浮动，是不受这段清除浮动代码的影响的。
clear: left-->清除左浮动
clear：right-->清除右浮动
方法二：
额外添加一个清除浮动的div,防止清除div的代码
clearDiv{clear: both;}
上边距-->top: 10px; position: relative;(设置边距时注意定位)
方法三：（目前一些大型网站流行的方法，当网站内容很多时，可以防止出现一个些意料外的问题）
：：after-->伪元素
clearDiv：：after{
content: "";-->冒号里为空，因为需要clearDiv中有点内容，但
不在浏览器中展示
visibility: hidden;-->将内容进行隐藏（防止一些误操作导致
clearDiv中出现额外的内容而导致洁面变
形）
height: 0px;-->将行高恢复到默认。
display; block;-->块状显示，将content 转换成跨级元素
clear: both;
}
专门针对IE浏览器清除浮动的方法：
clearDiv{ zoom: 1; }
zoom-->ie浏览器专用的，作用-->使页面里的对象可以重新加载、重新计算。从而起到重新渲染的效果。
可以非常有效的解决ie浏览器的一些bug、例如 外边距的重叠、浮动不能清除等。
网友评论