特點
- 浮動會從文檔的正常流中刪除，但是仍然會影響布局，基于此，一個元素浮動時，其他內容會環繞該元素
- 浮動元素的外邊距不會合并，如果其他元素與此浮動元素相鄰，而且這些元素也有外邊距，那么這些外邊距不會與浮動元素的外邊距合并
- 浮動元素會建立包含塊，生成塊級框，這點很重要
- 浮動元素，其包含塊定義為最近的塊級祖先元素
浮動元素的規則
浮動元素的規則有很多，暫時只列出以下三點，具體可以查看《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;
}
