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