一篇文章讓你不再擔心浮動
阿新 • • 發佈：2018-12-02
浮動的效果
文件流
文件流是文件中可顯示物件在排列時所佔用的位置。
將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流.(自己的理解是從頭到尾按照文件的順序，該在什麼位置就在什麼位置，也可以按照上面的意思理解，自上而下，自左到右的順序)
浮動的特點
使元素脫離文件流，按照指定的方向發生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來
1 塊元素可以在一行顯示 2 按照一個指定的方向移動，遇到父級的邊界或者相鄰的浮動元素就會停下來 3 行內元素支援寬高(設定浮動以後就會變成塊級元素) 4 脫離文件流：1 指元素不在頁面當中佔位置 2 定位是完全脫離文件流 3 浮動不是完全脫離文件流 5 塊級元素的預設寬度會被改變(包裹性) 塊元素不設定寬高，那寬高會自動變成所撐開的內容 6 父級高度塌陷(破壞性)--> 子元素浮動以後，那麼父元素的高度就不會自動撐開 7 換行不會被解析成空格-->浮動後的元素就會脫離文件流了，那它就不屬於文件流的結構了，所以換行和空格都和父級沒關係 如果高度不一致的情況下，想讓他們按順序排列就可以選擇inline-block
浮動的目的
為了達到自己的佈局目的，讓指定元素定位在指定位置，我們就需要用到浮動。
包含塊
想知道浮動的詳細內容就必須知道包含塊的概念。浮動元素的包含塊是其最近的塊級祖先元素。如下P標籤是img的包含塊而span不是。定位也有包含塊的概念
<p><img src="#" style="float:left"></p>
<span><img src="#" style="float:left"></span>
控制浮動元素的規則（準確的說就是浮動元素的特性，並不是需要程式碼實現的內容）
1 浮動元素的左或右外邊界不能超過其包含塊的左或右內邊界
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 200px; height: 200px; border:1px solid red ; padding: 10px; } .box1{ width: 50px; height: 50px; background: red; float: left; margin: 10px; } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body> </html>
2 浮動元素的左(或右)外邊界必須是源文件中之前出現的左浮動(或右浮動)元素的右(左)外邊界
這個規則的好處：所有的浮動元素都是可見的，不會產生一個浮動元素與另一個浮動元素重疊
3左(右)浮動元素的右(左)邊界不會再其右(左)邊右(左)浮動元素的左(右)外邊界的右(左)邊
這個規則也是防止浮動元素產生重疊，父級元素的寬度只有500px 兩個浮動子元素一個浮動在左，一個浮動在右，他們的寬度都是300px。這時候有浮動的元素就會想下浮動，避免產生重疊
4 浮動元素的頂端不能比之前(前一個浮動元素)或塊級元素的頂端更高
比如有A,B,C三個浮動元素，它們依次出現的次序是A,B,C,假如A浮動元素與頂端的距離為10px，那麼B元素與頂端的距離就一定要大於10px比如15px，那麼C與頂端的距離就一定要大於15px
5 如果源文件中一個浮動元素之前出現另一個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端更高 與4有點類似
6 浮動元素必須儘可能高地防止
7 左浮動元素必須向左儘可能遠，右浮動元素則必須向右儘可能遠。位置越高，就會向右或向左浮動的越遠
浮動的影響：
1 背景不能顯示
由於浮動產生，如果對父級設定了CSS background背景 CSS背景顏色 或CSS背景圖片。但是父級元素不能被撐開，所以導致CSS背景不能顯示。
2 邊框不能撐開
如果父級元素設定了CSS邊框屬性，子元素設定浮動，父級元素不能被撐開
3 margin padding設定值不能正確顯示
由於浮動導致父子級之間設定的css padding和css margin屬性的值不能正確表達，特別是上下邊的padding和margin不能正確顯示
4 塊狀元素，會鑽進浮動元素的下面，被浮動元素所覆蓋，像這樣
5 行內元素，例如文字， 則會環繞在浮動元素的周圍，為浮動元素留出空間，像這樣
6 浮動元素的父元素坍縮, 像這樣：
浮動解決的問題
外邊距重合問題
如果其他元素與此元素(浮動元素)相鄰(這表示水平相鄰和垂直相鄰)，而且這些元素也有外邊距，那麼這些外邊距不會與浮動元素的外邊距合併 —CSS權威指南
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box2{
width: 100px;
height: 100px;
background: green;
color: #fff;
border: 3px solid #f00;
margin-top: 25px;
float: left;
}
.box1{
width: 100px;
height: 100px;
background: green;
color: #fff;
border: 3px solid #f00;
margin-bottom: 25px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
浮動前
浮動後
清除浮動
1 clear
元素的某個方向上不能有浮動元素
取值：left 元素的左邊不能有浮動的元素
right元素的右邊不能有浮動的元素
bot 元素的兩邊都不能有浮動的元素
2 給父級新增高度
有時候是不能給父級元素新增高度的，所以這個方法就用不了(父級元素沒有高度的情況下)
3 inline-block
和上一個效果一樣 但是用來以後就沒有辦法居中
4 overflow:hidden
如果子級元素有定位的話，並且這個定位超過了父級的範圍，那樣的話就看不到了，所以不能加和這個命令
5 空標籤
空標籤是沒有內容的，但是它的作用是用來清除浮動的。所以不符合行為，樣式，結構分離的標準 （ie6下標籤是有一個最小高度19px，解決後也會有2畫素的偏差）
6 br清除浮動 和上面一樣
7 after偽類清除浮動(目前最主流的方法)
after-代表選擇的元素的內容後面
after偽類的內容預設是一個行內元素
content 為設定的內容
第一種 clear
原理：新增一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、程式碼少、瀏覽器支援好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 200px;
background: red;
border: 1px solid black;
}
.div1{
float: left;
}
.div2{
float: right;
}
/*1 clear: both;
.div3{
clear: both;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
第二種 父級設定高度 並不能真正清除浮動（看著像是）
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、程式碼少、容易掌握
缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的佈局時使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 2px solid #f00;
/*2、給父級新增高度：沒有從根本上解決浮動的問題*/
height: 100px;
}
.box{
width: 100px;
height: 100px;
background: royalblue;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="box"></div>
</div>
</body>
</html>
第三種 inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 2px solid #f00;
/*3、inline-block*/
display: inline-block;
}
.box{
width: 100px;
height: 100px;
background: royalblue;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="box"></div>
</div>
</body>
</html>
第四種 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、程式碼少、瀏覽器支援好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 2px solid #f00;
/*4、overflow:hidden;*/
overflow: hidden;
}
.box{
width: 100px;
height: 100px;
background: royalblue;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="box"></div>
</div>
</body>
</html>
第四種的另外 overflow: auto; 但是如果超出產生滾動條
第五種 空標籤
原理和clear一樣
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 2px solid #f00;
}
.box{
width: 100px;
height: 100px;
background: royalblue;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="box"></div>
<!--<!--5、空標籤-->
<div style="clear: both;"></div>
</div>
</body>
</html>
第六種 br標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 2px solid #f00;
}
.box{
width: 100px;
height: 100px;
background: royalblue;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="box"></div>
<!--6、br清除浮動-->
<br clear="all" />
</div>
</body>
</html>
效果和上面一樣
第七種 after
原理：IE8以上和非IE瀏覽器才支援:after，原理和方法2有點類似，zoom(IE專有屬性)可解決ie6,ie7浮動問題 （其他瀏覽器不用）
優點：瀏覽器支援好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：程式碼多、不少初學者不理解原理，要兩句程式碼結合使用才能讓主流瀏覽器都支援。
建議：推薦使用，建議定義公共類，以減少CSS程式碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 1px solid #f00;
}
.box{
width: 100px;
height: 100px;
background: blueviolet;
float: left;
color: #fff;
}
/*
* 7、after偽類清除浮動（現在最主流的方法）
*
*/
.box:after{
content: '這是偽類生成的內容';
}
.clearfix{
*zoom:1;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="box"></div>
</div>
</body>
</html>
