float:none left right inherit
none:默认值，不浮动；
inherit:继承父元素的float的值【IE不支持这个选项】；
1、对于块级元素，在不设置宽度的情况下，默认的宽度是100%，一旦设置了浮动，它的宽度就会根据内容进行自动调整；
<html>
<head>
<title>浮动</title>
<style type="text/css">
div {
height: 100px;
}
</style>
</head>
<body>
<div style="background: red">文字内容</div>
<div style="float: left;background:blue">文字内容</div>
</body>
</html>
2、设置了浮动的元素会脱离正常的文档流，父元素的高度是根据子元素的内容自动进行调整，如果将子元素设置为浮动，父元素的高度会变为0；
<html>
<head>
<title>浮动</title>
<style type="text/css">
div {
height: 100px;
}
.left {
float: left;
width: 30%;
}
</style>
</head>
<body>
<div class="container" style="background: red">
<div class="left" style="background: blue">
<p>质变引起量变质变引起量变质变引起量变质变引起量变质变引起量变质变引起量变质变引起量变质变引起量变</p>
</div>
<div style="background: pink">
<p>质变引起量变质变引起量变质变引起量变质变引起量变质变引起量变质变引起量变质变引起量变质变引起量变</p>
</div>
</div>
</body>
</html>
结果分析： container包含的容器，被浮动的元素顶上去了，所以看不见，主要原因是子元素设置成为浮动，父元素的高度为0 ，因此无法看见。
3、浮动的元素脱离文档流，但里面的内容仍然占据空间，会根据相对位置进行布局；
<html>
<head>
<title>浮动</title>
<style type="text/css">
.div1, .div2 {
height: 20px;
}
.div1{
background: red;
width: 300px;
float: left;
}
</style>
</head>
<body>
<div class="div1" >float</div>
<div class="div2" style="background: pink">normal2</div>
</body>
</html>
8030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
