CSS中清除浮動的作用講解與演示
技術標籤：前端學習版塊清除浮動浮動的影響CSSfloat與clear
目錄
1、浮動的作用
浮動在佈局方面會起到很大作用，塊級元素都是獨佔一行，要想讓多個塊級元素同一行展示，就需要浮動
2、浮動之後的影響
如果一個div1中的子div進行了浮動，而子div的高度不是事先確定好的，而是通過js動態提供的，這也就意味著，子div在頁面載入之前是沒有高度的，那麼div1作為父元素，必然也不能直接寫死一個高度（當父子元素高度不一致時，佈局上會出現不理想的效果）
參考程式碼如下（未清除浮動）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮動與清除浮動學習</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" 假設子元素浮動後，不清除浮動，當輸入子元素的高度為50後，看到的效果如下：
從上圖可以看出，div1的高度為0，只出現了一個div1的邊框，你可能會說，div1沒有設定高度，肯定沒有高度呀，但是div1有子div元素，子的div的高度理論上是會撐起來父元素的高度。
然而結果卻沒有，這是因為div1的子元素設定了浮動，浮動之後該元素脫離了文件流，它的高度與div1是沒有關係的，那麼此時div2作為兄弟元素，出現的位置在div1的下方其實就可以理解了，但是這種效果並不是我們希望看到的。
總結一下浮動帶來的影響：
當某元素的高度不能直接寫死，且其子元素設定了浮動，此時因為子元素脫離了文件流，它的高度是不能直接將父元素撐起來的，就會導致父元素在文件流中沒有高度，然後被其兄弟元素佔據位置，從而導致佈局混亂的結果
3、解決浮動影響：清除浮動
基於上述浮動後的影響，要解決的問題就是：
子元素浮動後，子元素的高度要撐滿其父元素，這樣才可以使得父元素在文件流中的高度與其子元素是一樣的，也就解決了出現佈局錯亂的情況
怎樣讓一個浮動元素的高度能撐起其父元素呢？
答案就是：新增清除浮動的程式碼
先看清除浮動後的效果：
從上圖可以看出，div1的高度被子元素撐起來了，浮動帶來的影響在清除浮動後已經消失了
清除浮動後的完整程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮動與清除浮動學習</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style>
#div1 {
border:2px solid orange;
background-color: red;
}
#son1 {
float: left;
margin-left:20px;
background-color: grey;
width: 20%;
}
#son2 {
float: right;
margin-right:20px;
background-color: green;
width: 30%;
}
/*清除浮動程式碼*/
.clearfloat1 {
clear: both
}
</style>
<script>
$(function(){
var height = prompt("請輸入子元素的高度")
$("#son1").height(height)
$("#son2").height(height-20)
})
</script>
</head>
<body>
<div id="div1" class="div1 clearfloat2">
<div id="son1">div1子元素1</div>
<div id="son2">div1子元素2</div>
<div class="clearfloat1"></div>
</div>
<div style="border: 2px solid blue;">
我是div1的兄弟元素div2
</div>
</body>
</html>