CSS float的相关图文详解（二）
最近這段時間有些忙，一直沒有寫關于如何清除浮動的，現在終于抽出時間了，還是那句話，如果哪里有錯誤或者錯別字，希望大家留言指正。我們一起進步！
在CSS中，我們通過float屬性實現元素的浮動。浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框，因此，創建浮動可以使文本圍繞圖像：
例如：
如果想要阻止行框圍繞浮動框，就需要對該框應用 clear 屬性。
clear屬性規定元素的哪一側不允許有其他浮動元素，也就是說表示框的哪些邊不應該挨著浮動框。其值有：
left：元素左側不允許有浮動元素
right：元素右側不允許有浮動元素
both：元素左右兩側不允許有浮動元素
none：默認值，允許浮動元素出現在兩側
為了實現這種效果，在被清理的元素的上外邊距刪添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
那么為什么要清除浮動？我們知道浮動的本質是用來做一些文字混排效果的，但是，被拿來做布局用則會有很多的問題出現。由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產生影響。為了解決這些問題就需要在該元素中清除浮動。準確來說并不是清除浮動，而是清除浮動后造成的影響。
清除浮動本質：清除浮動主要是為了解決父元素因為子級浮動引起內部高度為0的問題(父級元素沒有設置高度)。
? 清除浮動就是把浮動的盒子圈到里面，讓父盒子閉合出口和入口，不讓子元素出來影響其他元素。
清除浮動的方法：
1.額外標簽法：通過在 浮動元素的末尾添加一個空標簽，也就是說如果有多個浮動的話，在最后一個浮動的末尾添加一個空標簽。例如'<div style=clear:both></div>'，如果在父盒子中有多個子盒子，那就選擇父盒子中最后一個帶有浮動的子盒子。
html代碼：
<!DOCTYPE html> <html> <head> <title>示例</title> </head> <body><div class="father"><div class="big"></div><div class="small"></div></div><div class="footer"></div> </body> </html>?
css代碼：
<style>.father{border:1px solid red;width:300px; }.big{width:100px;height:100px;background-color:red; }.small{width:100px;height:100px;background-color:blue; }.footer{width:310px;height:105px;background-color:green; } </style>顯示效果如下：
這是沒有加浮動的盒子的排列效果。而加了浮動之后的代碼如下(html代碼不變，變的是css代碼)：
<style>.father{border:1px solid red;width:300px; }.big{width:100px;height:100px;background-color:red;/*添加了浮動*/float:left; }.small{width:100px;height:100px;background-color:blue;/*添加了浮動*/float:left; }.footer{width:310px;height:105px;background-color:green; } </style>而這時的顯示效果如下：
從代碼中可以看出，我們沒有給父盒子高度，給了big和small浮動，然后footer盒子跑到了father的下面，原因是沒有給father高度，big和small一浮動，父元素father的高度就是0了。而解決這個問題的方法可以使用額外標簽方法，即最后一個浮動標簽的后面，新添加一個標簽，用來清除浮動。代碼如下：
<!DOCTYPE html> <html> <head> <title>示例</title> </head> <body><div class="father"><div class="big"></div><div class="small"></div><div style="clear:both">這里添加了一個新標簽div，使用的是行內樣式清除浮動的</div></div><div class="footer"></div> </body> </html>顯示效果如下：
2.父級添加overflow屬性方法：可以給父級添加：overflow為hidden | auto | scroll
html代碼：
<!DOCTYPE html> <html> <head> <title>示例</title> </head> <body><div class="father"><div class="big"></div><div class="small"></div></div><div class="footer"></div></body> </html>css代碼：
<style>.father{border:1px solid red;width:300px; }.big{width:100px;height:100px;background-color:red;float:left; }.small{width:100px;height:100px;background-color:blue;float:left; }.footer{width:310px;height:105px;background-color:green; } </style>顯示效果如下：
這時，給big和small添加了浮動，然后footer就跑到了falter的下面，因為本身father是沒有高度的，father的高度是big和small撐開的，big和small添加了浮動就不占據原來的位置了，所以father的高度就為0，這時footer就占據了father的位置。解決方法可以給父元素father添加overflow的屬性。css代碼展示如下
<style>.father{border:1px solid red;width:300px;/*給父元素添加overflow屬性清除浮動*/overflow:hidden; }.big{width:100px;height:100px;background-color:red;float:left; }.small{width:100px;height:100px;background-color:blue;float:left; }.footer{width:310px;height:105px;background-color:green; } </style>顯示效果如下：
3.使用after偽元素清除浮動：記住：：：是給父元素添加偽元素。
html代碼：
<!DOCTYPE html> <html> <head> <title>示例</title> </head> <body><div class="father"><div class="big"></div><div class="small"></div></div><div class="footer"></div></body> </html>css代碼：
<style>.father{border:1px solid red;width:300px;overflow:hidden; }.big{width:100px;height:100px;background-color:red;float:left; }.small{width:100px;height:100px;background-color:blue;float:left; }.footer{width:310px;height:105px;background-color:green; } </style>顯示效果如下：
父盒子沒有給高度，給了big和small浮動，然后footer盒子跑到了father下面，原因是沒有給father高度，big和small一浮動父親的高度就為0了。而清除浮動的方法可以使用偽元素清除浮動，代碼如下顯示：
html代碼：
<!DOCTYPE html> <html> <head> <title>示例</title> </head> <body><!--clearfix這個名字是可以隨意取的--><div class="father clearfix"><div class="big"></div><div class="small"></div></div><div class="footer"></div></body> </html>css代碼：
/*利用偽元素清除浮動*/.clearfix:after{ /*正常瀏覽器清除浮動*/content:"";display:block;height:0;clear:both;visibility: hidden;}/*ie6清除浮動方式*/.clearfix{zoom:1;}.father {border: 1px solid red;width: 300px;}.big{width:100px;height:100px;background: #faa363;float: left;}.small{width:100px;height:100px;background: #2bc4e2;float:left;}.footer{width:310px;height:105px;background: blue;}顯示效果如下：
?
轉載于:https://www.cnblogs.com/xuln/p/10171038.html
總結
以上是生活随笔為你收集整理的CSS float的相关图文详解（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高精度倾斜摄影建模解决方案
- 下一篇： 02-CSS基础与进阶-day7_201