特点
- 浮动会从文档的正常流中删除，但是仍然会影响布局，基于此，一个元素浮动时，其他内容会环绕该元素
- 浮动元素的外边距不会合并，如果其他元素与此浮动元素相邻，而且这些元素也有外边距，那么这些外边距不会与浮动元素的外边距合并
- 浮动元素会建立包含块，生成块级框，这点很重要
- 浮动元素，其包含块定义为最近的块级祖先元素
浮动元素的规则
浮动元素的规则有很多，暂时只列出以下三点，具体可以查看《CSS权威指南的》P292~P297了解
- 浮动元素的外边界不会超出其父元素的外边界
- 浮动元素彼此不会“覆盖”，也就是说一个元素向左浮动，而另一个元素已经在那个位置，后放置的元素将挨着前一个浮动元素的右外边界放置
- 浮动元素的顶端不能比之前所有浮动元素或会计元素的顶端更高。
如下所示，float2并没有跑到最上面去，而是与float1并排显示
<style>
.wrap{
width: 300px;
height: 300px;
margin: 50px auto;
background: pink;
}
.content{
background: grey;
width: 100px;
float: left;
}
.float1{
background: blue;
width: 250px;
float: left;
}
.float2{
background: yellow;
width: 49px;
float: left;
}
</style>
<div class="wrap">
<div class="content">我要float显示</div>
<div class="float1">浮动1</div>
<div class="float2">浮动2</div>
</div>
显示如下：
Paste_Image.png
实例说明
例子1：
关于浮动元素会生成块级框的例子
考虑如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.wrap{
//width: 300px;
//height: 300px;
background: pink;
float: left;
position: relative;
left: 50%;
}
.cont{
position: relative;
top: 10px;
left: -50%;
//width: 100px;
//height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="cont">
我的
</div>
</div>
</body>
</html>
显示效果如下：
Paste_Image.png
作用是将div.cont居中，假如去除div.wrap的float属性，那么div.wrap的宽度为浏览器的宽度，最终无法使div.cont居中，float生成块级框就是：float后的元素的宽高 = 它的子元素的宽高,上面居中代码的流程如下：
- div.wrap根据position:relative; left: 50%;相对于父元素（它的父元素现在就是html，也就是浏览器的宽度，因此div.wrap的左边界线与屏幕的中心线对齐）
- div.wrap浮动使得div.wrap的宽度=div.cont的宽度
- div.cont使用position:relative; left: -50%; 这是相对于父元素宽度左移50%，因为父元素的宽度就等于它自身的宽度，因此就是相对于它本身左移50%，也就居中了
清除浮动的方法
方法一：
对受影响的元素使用： clear: both;
注意：一般这只是用于紧邻后面的元素的清除浮动
方法二：
对受影响的元素同时设置width:100%(或固定宽度) + overflow: hidden
注意：当子元素设置了float后，父元素包含块受到影响，当父元素缩成一条时，用clear:both清除浮动无效，
:before {
content: '';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
