3
4HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!
5
6
复制代码
复制代码
1.container{
2width:300px;
3height:300px;
4border:1pxsolidblack;
5}
6.container.content{
7float:left;
8width:150px;
9height:150px;
10background-color:lightpink;
11margin:5px;
12}
复制代码
content元素设置了左浮动，使div元素脱离文档流，文字在其周围坏绕显示。
2.2：float之父元素高度塌陷
以div元素为例。div元素的高度会通过内容自动撑开。也就是说，内容有多少，高度就有多高。但是当内部元素设置了float属性之后，会是父元素高度塌陷。代码和实例如下。
复制代码
1
2
3HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!
4
5
复制代码
如下，塌陷后css和demo。
复制代码
1.container{
2width:300px;
3border:1pxsolidblack;
4}
5.containerp{
6float:left;
7}
复制代码
可以看出，子元素设置浮动前后发生的变化。
3：清除浮动的方法
那么问题来了，如果内部元素要设置浮动，那如何避免父元素高度塌陷的问题呢？
有同学肯定会想，直接在父元素设置高度不就可以了吗？这在实际中是不行的。因为如果固定了父元素的高度，那如果之后想在其添加内容，不是又要去修改css代码了，特麻烦。
那解决父元素高度塌陷有两种方法。
3.1：父元素底部添加空div，然后在添加属性clear:both。
代码如下。
复制代码
复制代码
1
2
3HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!
4
5
6
复制代码
复制代码
复制代码
1.container{
2width:300px;
3border:1pxsolidblack;
4}
5.containerp{
6float:left;
7}
8.container.clearfix{
9overflow:hidden;
10zoom:1;
11}
复制代码
3.2：父元素设置伪类after。
复制代码
1
2
3HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!www.baiyuewang.netHelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!HelloWorld!
4
5
复制代码
复制代码
1.container{
2width:300px;
3border:1pxsolidblack;
4zoom:1;
5}
6.containerp{
7float:left;
8}
9.container:after{
10content:"";
11display:table;
12clear:both;
13}
复制代码
4：float元素去空格化
是什么意思呢？在平时的编码中，为了要符合HTML编码规范，都会为html标签添加缩进，达到美观的效果。可是缩进时就会产生空格，也就是 。当给元素设置左浮动时，元素本身左浮动，剩余的空格会被挤到最后，也就是上文所说的文字环绕效果。但是，要记住一点， 和回车敲下的空格的效果略有不同。
5：float元素块状化
在为内联元素设置浮动属性之后，display属性由inline变成block。并且可以为内联元素设置宽高。使用float加width属性可以实现一些简单的固定宽度的布局效果。
6：float流体布局
6.1：单侧固定，右侧自适应的布局。
1
2左浮动+固定宽度
3右边自适应宽度+margin-left
4
复制代码
1.container{
2max-width:90%;
3margin:0auto;
4}
5
6.left{
7float:left;
8text-align:center;
9background-color:lightpink;
10width:200px;
11height:300px;
12}
13
14.right{
15background-color:lightyellow;
16margin-left:200px;
17height:300px;
18padding-left:10px;
19}
复制代码
6.2：DOM与显示位置不同的单侧固定
1
2右浮动+固定宽度
3左边自适应宽度+margin-right
4
复制代码
1.container{
2max-width:90%;
3margin:0auto;
4}
5.container.right{
6float:right;
7width:200px;
8height:200px;
9background-color:lightpink;
10}
11.container.left{
12background-color:lightyellow;
13margin-right:200px;
14height:300px;
15padding-left:10px;
16}
复制代码
也就是说，html元素与显示在页面上的元素位置不相同。
6.3：DOM与显示位置相同的单侧固定
复制代码
1
2
3
4margin-right
5
6左浮动+固定宽度+margin-left负值
7
复制代码
复制代码
1.container{
2max-width:90%;
3margin:0auto;
4}
5.container.right{
6float:left;
7width:200px;
8height:200px;
9background-color:lightpink;
10margin-left:-200px;
11height:300px;
12}
13.container.left{
14background-color:lightyellow;
15margin-right:200px;
16height:300px;
17text-align:center;
18}
复制代码
6.4：智能布局
所谓智能布局，就是两栏都不需要设置宽度，宽度随内容自适应。
复制代码
1
2
3float+margin-right+自适应宽度
4
5
6display:table-cell---IE8+;
7display:inline-block---IE7+;
8自适应宽度
9
10
复制代码
复制代码
1.container{
2max-width:90%;
3margin:0auto;
4}
5.container.left{
6float:left;
7height:300px;
8background-color:lightpink;
9}
10.container.right{
11display:table-cell;
12display:inline-block;
13height:300px;
14background-color:lightyellow;
15}
复制代码
总结以下：
1：当一个元素设置float属性时，会使元素块状化。
2：float属性的创造初衷就是为了文字环绕效果而生的。
3：float元素会使父元素高度塌陷。
4：float元素会除去换行带来的空格。
5：使用float可以实现两栏自适应的布局。
