AI专业者开发社区 1 号成员
  •  0 回帖  •  7 浏览  •  4 个月前
   

详解CSS float属性

阅读目录

CSS 中的 float 属性是一个频繁用到的属性，对于初学者来说，如果没有理解好浮动的意义和表现出来的特性，在使用的使用很容易陷入困惑，云里雾里，搞不清楚状态。本文将从最基本的知识开始说起，谈谈关于浮动的应用，出现的问题和解决方案。

回到顶部

基础知识

float，顾名思义就是浮动，设置了 float 属性的元素会根据属性值向左或向右浮动，我们称设置了 float 属性的元素为浮动元素。
浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。举例说明如下：
Html 代码：

1 <div class="box">
2         <span class="float-ele">
3             浮动元素
4         </span>
5         普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流
6 </div>

CSS 代码：

1 .box { background: #00ff90; padding: 10px; width: 500px; }
2 .float-ele { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果图

float基本效果

float 基本效果

由效果图可以看出，span 元素周围的文字会围绕着 span 元素，而设置了 float 属性的 span 元素变成了一个块级元素的感觉，可以设置 width 和 height 属性。这是设置了 float 属性后的效果，关于 float 的详细细节，我们接下来详细讲解。

回到顶部

float 的详细细节

在说明 float 带来的详细细节之前，我们首先要了解一个概念。
包含块：浮动元素的包含块就是离浮动元素最近的块级祖先元素，前面叙述的例子中，div.box 就是 span 元素的包含块。

了解完包含块的概念之后，首先要说明的浮动元素的第一个特性：不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的 width 和 height，因此 float 常常用于制作横向配列的菜单，可以设置大小并且横向排列。

浮动元素的展示在不同情况下会有不同的规则，下面我们来一一说明这些规则。
1. 浮动元素在浮动的时候，其 margin 不会超过包含块的 padding
这一点很简单，浮动元素的浮动位置不能超过包含块的内边界
HTML 代码

<div class="box">
　　<span class="rule1">
   　　浮动元素
　　</span>
</div>

CSS 代码

1 .box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
2         .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果图

float规则一

float 规则一


这个例子中，box 的 padding 是 10px，浮动元素的 margin 是 10px，合起来为 20px，即浮动元素不会超过包含块的 padding。
PS：如果想要元素超出，可以设置 margin 属性

2. 如果有多个浮动元素，后面的浮动元素的 margin 不会超过前面浮动元素的 margin
简单说就是如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。
修改前面例子中的 HTML 代码如下：

 1 <div class="box">
 2         <span class="rule1">
 3             浮动元素 1
 4         </span>
 5         <span class="rule1">
 6             浮动元素 2
 7         </span>
 8         <span class="rule1">
 9             浮动元素 3
10         </span>
11     </div>

效果图如下：

float规则二

float 规则二

如图所示，浮动元素会一个一个排序下来而不会发生重叠现象。

3. 如果两个元素一个向左浮动，一个向右浮动，左浮动元素的 marginRight 不会和右浮动元素的 marginLeft 相邻。
什么意思呢，我们要分两种情况来看。
（1）包含块的宽度大于两个浮动元素的宽度总和，举例如下：
HTML 代码：

1 <div class="box">
2     <span class="rule1">
3         浮动元素 1
4     </span>
5     <span class="rule2">
6         浮动元素 2
7     </span>
8 </div>

CSS 代码

1 .box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
2 .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }
3 .rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果图

float规则三情况1

float 规则三情况 1

这种情况很简单：包含块元素的宽度足够大，两个元素一个向左浮动，一个向右浮动，井水不犯河水。

（2）包含块的宽度小于两个浮动元素的宽度总和
修改浮动元素的宽度为 300px，CSS 代码如下：

.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; }
.rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; }

效果图

float规则三情况2

float 规则三情况 2

如果所示，如果包含块宽度不够高，后面的浮动元素将会向下浮动，其顶端是前面浮动元素的底端。

4. 浮动元素顶端不会超过包含块的内边界底端，如果有多个浮动元素，下一个浮动元素的顶端不会超过上一个浮动元素的底端
这条规则简单说就是如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。举例如下：
HTML 代码：

 1 <div class="box">
 2         <p>在浮动元素之前在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，</p>
 3         <p class="rule1">
 4             浮动元素 1 浮动元素 1 浮动元素 1 浮动元素 1 浮动元素 1 浮动元素 1 浮动元素 1 浮动元素 1 浮动元素 1 浮动元素 1 浮动元素 1 浮动元素 1
 5         </p>
 6         <p>在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后</p>
 7         <p class="rule1">
 8             浮动元素 2 浮动元素 2 浮动元素 2 浮动元素 2 浮动元素 2 浮动元素 2 浮动元素 2 浮动元素 2 浮动元素 2 浮动元素 2 浮动元素 2 浮动元素 2 浮动元素 2
 9         </p>
10     </div>

CSS 代码

1 .box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
2 .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 250px; text-align: center; }
3 p { margin-top: 20px; margin-bottom: 20px; }

效果图

float规则四

float 规则四


如图所示，两个浮动元素，后面的浮动元素不会超过前面的浮动元素

5. 如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会不会高于非浮动元素
这条规则也是显而易见的，在第 4 条规则中的例子，浮动元素有一个非浮动元素 p，而浮动元素没有超过它。

6. 浮动元素会尽可能地向顶端对齐、向左或向右对齐
在满足其他规则下，浮动元素会尽量向顶端对齐、向左或向右对齐，在第 4 条规则中的例子，浮动元素会尽可能靠近不浮动的 p 元素，左侧对齐
float规则六

float 规则六
回到顶部

float 特殊情况

前面讨论了 float 需要遵守的一些规则，这些规则都是在比较常见的场景下展示的结果。下面我们来讨论一些不常见的情况。

浮动元素的延伸性

在说浮动元素的延伸性之前，我们首先来考虑一个比较特殊的例子。
我们将 span 元素放在 p 元素内，并将其高度设置成高于 p 元素并且左浮动，这个例子的关键在浮动元素高度高于父元素。
HTML 代码

1 <p>
2         在浮动元素之前在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，
3         <span class="high-float">
4             浮动元素比父级元素高
5         </span>
6     </p>
7     <p>在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后</p>

CSS 代码

1 p { margin-top: 20px; margin-bottom: 20px; background-color: #00ff21; width: 500px; }
2 .high-float { float: left; height: 80px; line-height: 80px; background-color: orangered; }

效果图

浮动元素高度大于父级元素

浮动元素高度大于父级元素

在这个例子中，浮动元素高度高于父元素，可以看到浮动元素超出了父元素的底端。
这种情况要怎么解决呢，只要将父元素也设置成浮动即可，我们将第一个 p 元素设置成左浮动，效果如下
浮动元素延伸性

浮动元素延伸性

将父元素 p 设置成 float:left 后，浮动元素就会被包含到父元素里面，我们将这个特性成为浮动元素的延伸性。
浮动元素的延伸性是什么呢，我们可以将其理解为元素被设置成浮动后，该元素会进行延伸进而包含其所有浮动的子元素

浮动元素超出父级元素的 padding

在前面提到的第一条规则：浮动元素的外边界不会超过父级元素的内边界。大部分情况下，我们见到的场景都是符合的。但是有一些特殊情况。
（1）负 margin
我们将浮动元素的 margin-left 设置成负数。
HTML 代码：

1 <p>
2     在浮动元素之前在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，
3     <span class="minus-margin">
4         负 margin-left
5     </span>
6 </p>

CSS 代码：

1 p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 500px; }
2 .minus-margin { float: left; height: 80px; line-height: 80px; background-color: orangered; margin-left: -20px; }

效果图

负maring的浮动元素

负 maring 的浮动元素

将 margin-left 设置成负数之后，浮动的子元素明显超出了父元素的内边界，这难道不是违反了第一条规则吗？
但仔细想想，这其实是合理的，因为默认情况下 marign-left 就是 0，所以不会超出父元素的内边界，但是将其设置成负数之后，就相当于浮动元素覆盖了自己的内边界一样。
我们在从数学的角度来看看这个问题，这个例子中：
父元素的 margin-left:50px，padding 和 border 默认为 0，即内边界所在距离浏览器左侧的位置为 50px。
浮动的子元素默认情况下距离浏览器左侧的像素应该为 50px，但是将其设置成 margin-left:20px 后，浏览器会进行计算：
50px+（-20px）margin+0border+0padding=30px。距离浏览器左侧更近，所以超出了父元素。

（2）浮动元素宽度大于父级元素宽度
如果我们将浮动元素的宽度设置大于父级元素，效果会如何呢？
元素左浮动，width 大于父级元素
HTML 代码

1 <p>
2     在浮动元素之前在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，
3     <span class="big-width">
4         width 大于父级元素
5     </span>
6 </p>

CSS 代码

1 p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; }
2 .big-width { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; }

效果图

大width的浮动元素

大 width 的浮动元素

将浮动元素左浮动，并且宽度超出父级元素时，由于浮动元素宽度较大，它会超过父级元素的右内边界
如果将其设置成右浮动，情况又会怎么样呢？
大width的浮动元素

大 width 的浮动元素


可以看到，设置成右浮动后，会超出父级元素的左内边界。

重叠问题

重叠问题是指两个元素再同一个位置，会出现上下重叠的问题。浮动元素如果和普通文档流发生重叠会怎么样呢？
首先浮动元素要怎么样才会发生重叠呢，设置其 margin-top 为负数即可。我们看看例子：
HTML 代码：

1 <p>
2         <span>
3             在浮动元素之前在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前。
4         </span>
5         <span class="overlay">
6             浮动元素重叠
7         </span>
8     </p>

CSS 代码

1 p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; }
2 .overlay { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; margin-top: -30px; }

效果图如下：

浮动元素的重叠问题

浮动元素的重叠问题


如果浮动元素不设置负 margin 时，是这样的
浮动元素的重叠问题

浮动元素的重叠问题

在这个例子中，可以看到 p 中正常流元素 span 的内容会显示在浮动元素上面。
我们给设置 span 设置背景图片试试，效果如下：
浮动元素的重叠问题：有背景图

浮动元素的重叠问题：有背景图

元素设置背景后，重叠的部分还是会显示背景

如果是 span 标签换成 div 标签会怎么样呢？
HTML 代码：

1 <p>
2      <div style="background-image:url(../images/banner1.jpg)">
3          在浮动元素之前在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前，在浮动元素之前。
4      </div>
5      <span class="overlay">
6          浮动元素重叠
7      </span>
8  </p>

效果图

浮动元素的重叠问题：块级元素有背景图

浮动元素的重叠问题：块级元素有背景图


这种情况下，重叠的部分不会显示背景图片。

总结一下这两种情况的区别：
1、行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上
2、块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上

回到顶部

clear 属性

有的时候，我们不希望一些元素会被旁边的浮动元素影响到，这个时候就需要用到 clear 属性了。
clear 属性：确保当前元素的左右两侧不会有浮动元素。
我们举个例子进行说明：
假设有 3 个浮动的 div 如下所示：
3个浮动元素

3 个浮动元素

它的 HTML 代码和 CSS 代码如下
HTML 代码：

1 <div class="box">
2         <div class="float">浮动元素 1</div>
3         <div class="float">浮动元素 2</div>
4         <div class="float">浮动元素 3</div>
5     </div>

CSS 代码：

1  .float { float: left; width: 150px; background: #0094ff; border: 1px solid red; margin-left: 5px; }
2 .cl { clear: left; }
3 .cr { clear: right; }
4 .cb { clear: both; }

假设有我们有想让第二个浮动元素另起一行进行浮动，那该怎么做呢？

根据 clear 属性的定义：确保当前元素的左右两侧不会有浮动元素。
我们对第一个浮动元素添加 clear:right 保证其右侧不会有浮动元素。修改 HTML 代码如下：

1 <div class="box">
2     <div class="float cr">浮动元素 1</div>
3     <div class="float">浮动元素 2</div>
4     <div class="float">浮动元素 3</div>
5 </div>

查看效果发现没有什么变化

第1个元素清除浮动

第 1 个元素清除浮动

这种方法是错误的！！

那我们试试给第二个元素添加 clear:left 保证其左侧不会出现浮动元素。修改 HTML 代码如下：

1 <div class="box">
2     <div class="float">浮动元素 1</div>
3     <div class="float cl">浮动元素 2</div>
4     <div class="float">浮动元素 3</div>
5 </div>

第2个元素清除浮动

第 2 个元素清除浮动


可以看到这次 clear 属性有效果了。

同样是设置 clear 属性，为什么会出现这样的结果呢？
使用 clear 属性的时候要记住：clear 只对元素本身的布局起作用。
在前面的例子中，第一个浮动元素添加了 clear 属性，它并不会影响到其他元素的布局，只会影响自己，所以第二个浮动元素并不会另起一行。
而第二个浮动元素设置了 clear 后，我们可以看到 clear 作用于自己，所以元素另起一行。

回到顶部

清除浮动

清除浮动是一个经常提到的东西，首先我们要理解使用浮动会带来什么问题，以及为什么要清除浮动。
我们知道，一个块级元素如果没有设置 height，其 height 是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的 height 就会被忽略，这就是所谓的高度塌陷。要解决这样的问题，我们就是要使用清除浮动。
清除浮动有很多方法，下面我们一一说明每一种方法。

对于 IE 浏览器来说，要清除浮动带来的问题，只需要触发器 hasLayout 就可以，直接设置样式 zoom:1 就可以触发。关于 hasLayout 的知识，这里暂不详述，以后我们专门来讲讲这个东西，感兴趣的同学可以先查查相关资料。

对于非 IE 浏览器，主要有下面几种方法：

增加额外的 div

这是最简单直接的方法，哪里有浮动元素，就在其父级元素的内容中增加一个（作为最后一个子元素）

1 <div style="clear:both"></div>

这样就会清除浮动元素带来的问题。

优点：简单直接，初学者常常使用的方法，也易于理解
缺点：增加额外的无意义标签，不利于语义化，每次清除都要添加额外的空标签，造成浪费

父级元素添加 overflow:hidden

这个方法的关键在于触发了 BFC，BFC 是 CSS 中的难点之一，我们以后专门来学习这个概念。现在只需要知道它可以清除浮动带来的影响。

1 .clearfix{overflow:hidden;zoom:1}

优点：代码量少，没有额外的标签

缺点：如果子元素超出父元素的范围，会造成超出的部分被隐藏

after 伪元素

after 表示子元素的后面，通过它可以设置一个具有 clear 的元素，然后将其隐藏

1 clearfix:{
2     zoom:1
3 }
4 clearfix:after{
5     display:block; content:''; clear:both; height:0; visibility:hidden;
6 }

这种方法的原理和第一个方法一样，就是生成一个元素来清除浮动，只是这个元素是“假的”。

优点：没有额外标签，综合起来算是比较好的方法
缺点：稍显复杂，但是理解其原理后也挺简单的
推荐使用这种方法。

回到顶部

float 的应用

说了这么多 float 的原理和可能造成的问题，接下来我们就要谈谈 float 的应用。

文字环绕效果

float 最初的应用就是文字环绕效果，这对图文并茂的文章很有用。我们简单的距离说明一下：
HTML 代码

1 <div class="box">
2         <img src="1.jpg" class="float" />
3         我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字
4     </div>

CSS 代码：

1 .box { background: #00ff90; padding: 10px; width: 500px; }  
2 .float {background: #0094ff none repeat scroll 0 0;border: 1px solid red;float: left;margin-left: 5px;width: 400px;}

效果图

文字环绕效果

文字环绕效果

这样很轻松的实现了文字环绕效果。

横向菜单排列

在之前提到的 display:inline 的文章详解 CSS display:inline-block 的应用中，我们提到了横向排列菜单的实现，最早是利用 float 属性来实现的，它可以很简单的实现横向菜单的效果。
HTML 代码：

1 <ul class="menu clearfix">
2     <li>首页</li>
3     <li>政治</li>
4     <li>娱乐</li>
5     <li>体育</li>
6     <li>游戏</li>
7 </ul>

CSS 代码：

1 .clearfix: { zoom: 1; }
2     .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }
3 .menu { background: #0094ff; width: 500px; }
4     .menu li { float: left; width: 100px; list-style-type: none; }

效果图：

横向菜单

横向菜单


这种方式可以很轻松的实现横向菜单效果，但需要注意的是要注意清除浮动，推荐使用 display:inline-block 来实现

布局

float 最经常使用的场景就是布局。使用 float 可以很简单的实现布局，而且易于理解。下面我们来实现一个三栏两列的固定布局。
HTML 代码：

 1 <div class="header">
 2     我是头部
 3 </div>
 4 <div class="content clearfix">
 5     <div class="side">左侧</div>
 6     <div class="main">
 7         右侧
 8     </div>
 9 </div>
10 <div class="footer">
11     我是底部
12 </div>

CSS 代码

1 .clearfix: { zoom: 1; }
2     .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }
3 .header, .footer { height: 50px; background: #0094ff; text-align: center; }
4 .content { margin: 0 auto; width: 1000px; background: #000000; }
5 .side { float: left; height: 500px; width: 280px; background: #ff006e; }
6 .main { float: right; height: 500px; width: 700px; background: #fbcfcf; }

效果图

三栏两列布局

三栏两列布局


这就是一个很常见的布局，要注意的就是清除浮动的问题。

float 常见的应用大概是这几种，当然它存在着更多的应用等待着大家去挖掘，欢迎交流！！

回到顶部

总结

float 属性是一个频繁用到的属性，要用好它就要理解它的特性，否则容易云里雾里搞不清楚状况。关于 float，最重要的是要理解下面几点：
1.float 会造成元素脱离文档流
2.float 影响元素的几个规则
3. 浮动带来的问题以及如何清除浮动

原文地址：http://luopq.com/2015/11/08/CSS-float/