一、float：主要目的是為了實(shí)現(xiàn)文本繞排圖片的效果。

也成了創(chuàng)建多欄布局最簡單的方式。

<img src= “ ” /><p>文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容</p>

【1】文本繞排圖片

　　P {margin: 0; border: solid 1px;}　　img {float: left;}

【2】創(chuàng)建多欄布局

　　P {margin: 0; border: solid 1px; width: 200px; float: left;}　　img {float: left;}

二、浮動元素脫離了文檔流，其父元素也看不到他了，因為也不會包圍他，就會出現(xiàn)子元素有高度，而父元素不會被撐起，這時候并非我們想要，

下面有三種方法解決，請審時度勢合理應(yīng)用：

<section><img src=" /><p>這是段落這是段落這是段落這是段落這是段落這是段落這是段落</p></section><footer>這是底部這是底部這是底部這是底部這是底部這是底部這是底部</footer>

section , footer {border: solid 1px;}img {float: left;}

【1】為父元素添加 overflow： hidden；強(qiáng)制父元素包圍浮動元素

這樣聲明的真正用途是 防止父元素被超大內(nèi)容撐開，應(yīng)用overflow： hidden之后，父元素依然保持其設(shè)定的寬度，超大的子內(nèi)容會被容器剪切掉

除此之外，overflow： hidden還有另外一個作用，即它能可靠地迫使父元素包含其浮動子元素。

不能在使用下拉菜單的頂級元素上使用，否則作為其子元素的下拉菜單就不會顯示了。

【2】同時浮動父元素, 寬度100%與瀏覽器寬度同寬， 給footer設(shè)置清除浮動，使footer不會擠到section旁邊去

　　section {border: solid 1px; float: left; width:100%}　　footer {border: solid 1px; clear: left}　　img {float: left;}

不能在靠外邊距自動居中的元素使用。否則不再居中。

【3】添加非浮動的清除元素（偽元素）

.clearfix: after {　　content: "";　　display: block ;　　height: 0　　visibility: hidden;　　clear : both}

三、沒有父元素時，如何清除(img p 作為一組 ，沒有父元素)

<section>　　<img src=" />　　<p html' target='_blank'>class="clearfix">文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容</p>　　<img src=" />　　<p class="clearfix">文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容</p>　　<img src=" />　　<p class="clearfix">文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容</p></section>

.clearfix: after {　　content: "";　　display: block ;　　height: 0  　visibility: hidden;　　clear : both}

總結(jié)：以上就是本篇文的全部內(nèi)容，希望能對大家的學(xué)習(xí)有所幫助。

相關(guān)推薦：

JS簡單實(shí)現(xiàn)浮動窗口

怎么處理http被劫持浮動廣告

CSS實(shí)現(xiàn)清除浮動問題的

以上就是HTML中浮動與清除浮動的詳細(xì)內(nèi)容，更多請關(guān)注 其它相關(guān)文章！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。