CSS中浮動屬性float及清除浮動
1、float屬性
CSS 的 Float（浮動），會使元素向左或向右移動，由于浮動的元素會脫離文檔流，所以它后面的元素會重新排列。
浮動元素之后的那些元素將會圍繞它，而浮動元素之前的元素將不會受到影響。比如如果一個圖像向右浮動，下面的文本流將環繞在它左邊。
<div> <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p> <div class="div2"> <img src="https://www.runoob.com/images/klematis_small.jpg" alt=""> <p>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵 </p> </div> </div>
.div2 { background: #c6e5b4; } img { float: right; }
2、浮動的負作用
2.1、父元素內容區不能被撐開
如果一個父元素里面的子元素都是浮動的話，父元素的內容區將不能被子元素撐開
<div class="div1 clearfloat"> <div class="left">Left</div> <div class="right">Right</div> </div>
.div1 { background: #000080; border: 1px solid red; } .left { float: left; width: 20%; } .right { float: right; width: 30%; }
如圖，div1 的內容區將為0
要想解決父元素不能被撐開的問題，只要給該父元素添加 overflow: hidden; 屬性值即可。
2.2、脫離文檔流
使用浮動的元素將會脫離文檔流，后面的元素將會跑到浮動元素的下面，不過文本內容不會被遮擋
3、清除浮動
3.1、在浮動元素后面定義一個空元素
給浮動元素后面添加一個空元素，該元素樣式為 clear: both ，即可清除浮動
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div style="clear:both"></div> </div>
3.2、給浮動元素的父元素添加偽元素
給浮動元素的父元素添加偽元素，給該偽元素添加清除浮動的樣式即可清除浮動。
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div>
.div1:after { content: ""; clear: both; display: block; }
父元素的偽元素必須設置 display 為 block 才行。
注意：偽元素必須設置在浮動元素的父元素上才行，設置在浮動元素上沒有效果。比如下面：
<div class="floatDom"></div> <div class="content">這里是內容</div>
.floatDom { width:100px; height:100px; background:#d9bcbc; float: left; } .floatDom::after { clear: both; display: block; content: ""; } .content { height:150px; background:#8585c0; }
設置在浮動元素上沒有效果，并沒有清除浮動，下面的元素仍然會跑上去。
3.3、父元素定義overflow:hidden
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div>
.div1 { overflow: hidden; }
浮動元素的父元素只要定義overflow: hidden 即可清除浮動
為什么父元素設置 overflow 屬性即可清除浮動？
原因：根據 BFC 布局規則，計算 BFC 高度時，浮動元素也參與計算。BFC 詳情參考：http://www.rzrgm.cn/lhb25/p/inside-block-formatting-ontext.html
浙公網安備 33010602011771號