HTML中浮動與清除浮動

本篇文章主要介紹HTML中浮動與清除浮動，有興趣的朋友參考下，希望對大家有幫助。

一、float：主要目的是為了實現文字繞排圖片的效果。

           也成為了創建多欄佈局最簡單的方式。

<img  src= “ ” / alt="HTML中浮動與清除浮動" >
<p>文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>

【1】文字繞排圖片

#

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

【2】建立多欄佈局

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

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

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

<section>
<img  src=" / alt="HTML中浮動與清除浮動" >
<p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
</section>
<footer>这是底部这是底部这是底部这是底部这是底部这是底部这是底部</footer>

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

#【1】為父元素加上overflow： hidden；強制父元素包圍浮動元素

#這樣聲明的真正用途是防止父元素被超大內容撐開，應用overflow： hidden之後，父元素仍保持其設定的寬度，超大的子內容會被容器剪切掉

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

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

【2】同時浮動父元素, 寬度100%與瀏覽器寬度同寬， 給footer設定清除浮動，使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=" / alt="HTML中浮動與清除浮動" >
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
　　<img  src=" / alt="HTML中浮動與清除浮動" >
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
　　<img  src=" / alt="HTML中浮動與清除浮動" >
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
</section>

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

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。

相關推薦：

JS簡單實作浮動視窗

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

CSS實作清除浮動問題的

#CSS實作清除###浮動###問題的#########

以上是HTML中浮動與清除浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章！