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