css清除浮動(dòng)可以理解為打破橫向排列。 清除浮動(dòng)的關(guān)鍵字是clear，官方定義如下： 語法： clear : none | left | right | both 取值： none : 默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象 left : 不允許左邊有浮動(dòng)對(duì)象 right : 不允許右邊有浮動(dòng)對(duì)象 both : 不允許有浮動(dòng)對(duì)象 根據(jù)上邊的基礎(chǔ)，假如頁面中只有兩個(gè)元素div1、div2，它們都是左浮動(dòng)，場景如下：此時(shí)div1、div2都浮動(dòng)，根據(jù)規(guī)則，div2會(huì)跟隨在div1后邊，但仍然希望div2能排列在div1下邊，就像div1沒有浮動(dòng)，div2左浮動(dòng)那樣。這時(shí)候就要用到清除浮動(dòng)（clear）對(duì)于CSS的清除浮動(dòng)(clear)，一定要牢記：這個(gè)規(guī)則只能影響使用清除的元素本身，不能影響其他元素。具體做法：要想讓div2下移，就必須在div2的CSS樣式中使用浮動(dòng)。本例中div2的左邊有浮動(dòng)元素div1，因此只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不允許出現(xiàn)浮動(dòng)元素，這樣div2就被迫下移一行。
成都創(chuàng)新互聯(lián)公司長期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為吳興企業(yè)提供專業(yè)的做網(wǎng)站、網(wǎng)站建設(shè)，吳興網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
屬性值
float 是最開始出現(xiàn)的一種布局方式，主要解決：文本在圖像周圍環(huán)繞，也即應(yīng)用于圖像。但是在css中，任何元素都可以浮動(dòng)， 浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框 ，而不論它本身是何種元素。
元素一般是處于普通流中，也即塊級(jí)元素獨(dú)占一行，從上往下依次顯示布局。行級(jí)元素可以在一行顯示多個(gè)，按照順序進(jìn)行顯示布局。
而添加了 float 布局的元素則會(huì)脫離原來所在的文檔流。并 ‘漂浮’ 在當(dāng)前所在的文檔流的位置（如果前一個(gè)元素沒有添加 float 布局的情況下），由于當(dāng)前元素文檔流實(shí)際上沒有被元素占用，因此當(dāng)前元素之后的元素會(huì)按照普通流布局的方式，占用當(dāng)前元素的文檔流。表現(xiàn)為： 丟失空間
也即：
此時(shí)由于第一個(gè)元素添加了 float:left ，則脫離了原來的文檔流，后面元素會(huì)向上移動(dòng)，占用第一個(gè)元素的空間。
如果第二個(gè)元素也添加了 float ，那么可以這樣去思考，由于第一個(gè)元素的原因，第二個(gè)元素所處的文檔流變成了第一個(gè)元素所處的文檔流，此時(shí)再給第二個(gè)元素添加 float ，那么也會(huì)像第一個(gè)元素一樣，脫離當(dāng)前的文檔流，使得當(dāng)前元素和第一個(gè)元素一樣處于 '漂浮' 狀態(tài)，并緊跟著第一個(gè)元素顯示一排。
同樣，如果第二個(gè)元素后面還有其他元素，那么也會(huì)向上移動(dòng)，改變?cè)瓉硭幍奈臋n流位置。
注意：添加了 float 的元素，只是在會(huì)脫離當(dāng)前所在的文檔流，但是仍然漂浮在當(dāng)前文檔流 上一層 ，而不是說直接脫離整個(gè)文檔流，跑到所有文檔流的最頂部 。
從上面案例可以看出，添加了浮動(dòng)的元素會(huì)影響其后元素的布局。此外由于元素脫離原來的文檔流，且父盒子沒有添加高度屬性，那么父盒子無法感知到子盒子的存在，因此父盒子不會(huì)被撐開。
知道了 float 帶來的不好的地方，則需要去清除浮動(dòng)帶來的影響。
方法一：采用css clear 屬性
將該屬性添加在被浮動(dòng)影響的后面元素，即可以清除浮動(dòng)
則受浮動(dòng)影響的元素就可以正常顯示了
因此在受浮動(dòng)影響的父元素，就可以利用此方法，在浮動(dòng)元素之后新增加一個(gè)元素，使新增加的元素清除浮動(dòng)，這樣新增加的元素的位置就在浮動(dòng)元素的下面，使得在一定程度上實(shí)現(xiàn)了撐開盒子的作用。
方法二：BFC
其次還可以采用BFC，使得父元素形成獨(dú)立的空間，也即可以感知子元素的高度和寬度，在一定程度上也不會(huì)影響外面的元素的布局。
浮動(dòng)元素邊界不能超過父元素的padding
元素浮動(dòng)后會(huì)變?yōu)閴K元素包括行元素如 span ，所以浮動(dòng)后的元素可以設(shè)置寬高。
通過形狀浮動(dòng)可以讓內(nèi)容圍繞圖片，類似于我們?cè)趙ord 中的環(huán)繞排版。要求圖片是有透明度的PNG格式。
shape-outside 定義了一個(gè)可以是非矩形的形狀，相鄰的內(nèi)聯(lián)內(nèi)容應(yīng)圍繞該形狀進(jìn)行包裝。默認(rèn)情況下，內(nèi)聯(lián)內(nèi)容包圍其邊框， shape-outside 提供了一種自定義此包裝的方法，可以將文本包裝在復(fù)雜對(duì)象周圍而不是簡單的框中。
理解：使用形狀值來定義浮動(dòng)區(qū)域的浮動(dòng)，這將使得內(nèi)聯(lián)內(nèi)容會(huì)環(huán)繞著形狀，而不是產(chǎn)生浮動(dòng)的邊框。
關(guān)鍵字屬性值
函數(shù)值屬性
url值
文字通過給定的圖片，并且通過計(jì)算圖片的透明度后獲取的形狀區(qū)域進(jìn)行圍繞，這里需要注意的是此效果必須在服務(wù)器端預(yù)覽，本地預(yù)覽會(huì)報(bào)圖片跨域問題，給定的圖片必須是有透明區(qū)域的圖片
漸變值
按照給定的漸變通過計(jì)算排除透明通道后得到的形狀，然后文字按照此形狀的邊緣進(jìn)行環(huán)繞
最后：函數(shù)值/url/linear-gradient可以和關(guān)鍵字屬性值搭配使用，此時(shí)關(guān)鍵字屬性作為基本形狀提供相應(yīng)的參考框盒。
clip-path 使用裁剪方式創(chuàng)建元素的可顯示區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。且此方式原來的區(qū)域仍然存在，只是顯不顯示的問題。裁剪之后只有規(guī)定的區(qū)域可以顯示。
基本語法
其中：
float是浮動(dòng)，翻譯成中文也是浮動(dòng)意思。進(jìn)入對(duì)應(yīng)css手冊(cè)中float手冊(cè)了解float基本信息。
float的作用：通過css定義float（浮動(dòng)）讓div樣式層塊，向左或向右（靠）浮動(dòng)。
float語法 ：
Float常跟屬性值left、right、none
Float:none 不使用浮動(dòng)
Float:left 靠左浮動(dòng)
Float:right 靠右浮動(dòng)
Float浮動(dòng)用于設(shè)置對(duì)象靠左與靠右浮動(dòng)樣式，可以實(shí)現(xiàn)我們所需要的讓DIV、SPAN等標(biāo)簽居左居右浮動(dòng)。
簡單使用語法
div{float:left} /* css注釋：設(shè)置div對(duì)象浮動(dòng)靠左（left） */
div{float:right} /* css注釋：設(shè)置div對(duì)象浮動(dòng)靠右(right) */
你犯了一個(gè)細(xì)節(jié)錯(cuò)誤。我剛查看了你的css，為什么fr有效，fl卻無效。因?yàn)槟鉬l上面的樣式屬性寫錯(cuò)了.clearfix(zoom:1)應(yīng)該是.clearfix{zoom:1}。是{}大括號(hào)，所以造成了fl無效。
浮動(dòng)元素可以相互嵌套，嵌套規(guī)律與流動(dòng)元素的嵌套相同。浮動(dòng)的包含元素（父元素）總會(huì)自動(dòng)調(diào)整自身的高度和寬度以實(shí)現(xiàn)對(duì)浮動(dòng)元素的包含。
我們來看一個(gè)例子：
瀏覽器效果圖：
這時(shí)會(huì)發(fā)現(xiàn)父元素會(huì)自動(dòng)調(diào)整自身的大小來包含子元素。
如果包含元素定義了高度和寬度則他不會(huì)隨子元素的大小而自動(dòng)調(diào)整自身顯示區(qū)域來適應(yīng)子元素的顯示。注意，在IE6及更低版本瀏覽器中包含框仍然能夠自動(dòng)調(diào)整自身大小來適應(yīng)子元素的顯示大小，不過在IE7版本中微軟糾正了這個(gè)不符合標(biāo)準(zhǔn)的顯示方法。如下
示例：
瀏覽器效果圖：
默認(rèn)狀態(tài)下溢出不隱藏，我們可以添加 樣式 overflow:hidden; 隱藏多余的部分或overflow: scroll; 多余部分顯示滾動(dòng)條。
如果把浮動(dòng)元素嵌入到流動(dòng)元素之內(nèi)，則父元素不能夠自適應(yīng)子元素的高度，
如下示例：
瀏覽器效果圖：
在上圖中可以看到包含元素div并，沒用顯示。原因就是包含元素沒有適應(yīng)子元素的高度，而是根據(jù)自身定義的屬性以獨(dú)立的形式顯示（父元素沒有被撐開，僅收縮成一條直線顯示）。所以，在應(yīng)用混合嵌套式，要預(yù)測(cè)到浮動(dòng)與流動(dòng)混合布局時(shí)會(huì)出現(xiàn)的各種怪現(xiàn)象，并積極做好兼容處理。
解決方法：可以在包含元素內(nèi)的最后一行添加一個(gè)清除元素，強(qiáng)制撐開包含元素，使其包含浮動(dòng)元素。
示例如下：
瀏覽器效果圖：
本文章參考書籍：HTML5＋CSS3＋JavaScript從入門到精通（標(biāo)準(zhǔn)版）未來科技 編著
1、第二種方法：首先根據(jù)下方圖片中的代碼進(jìn)行輸入編輯。
2、然后根據(jù)下方圖片中的代碼進(jìn)行輸入編輯。
3、然后繼續(xù)根據(jù)下方圖片中的代碼進(jìn)行輸入編輯。
4、第二種方法：如果想要靠右，可以先設(shè)置div2的寬度，在設(shè)置text-align即：.div2{position:absolute;width:200px,text-align:right}//widtn是設(shè)置和div1一樣的寬度，效果圖如下：
重慶分公司
重慶分公司
