概述頁面中浮動(dòng)與清除浮動(dòng)

來源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：CSS/HTML|點(diǎn)擊：次

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

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

<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;}

二、浮動(dòng)元素脫離了文檔流，其父元素也看不到他了，因?yàn)橐膊粫?huì)包圍他，就會(huì)出現(xiàn)子元素有高度，而父元素不會(huì)被撐起，這時(shí)候并非我們想要，

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

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

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

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

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

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

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

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

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

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

【3】添加非浮動(dòng)的清除元素（偽元素）

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

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

<section>
　　<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>
　　<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
}

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持我們！

上一篇：Html 實(shí)現(xiàn)動(dòng)態(tài)顯示顏色塊的報(bào)表效果(實(shí)例代碼)

欄目：CSS/HTML

下一篇：html是什么文件 html文件如何打開

本文標(biāo)題：概述頁面中浮動(dòng)與清除浮動(dòng)

本文地址：http://mengdiqiu.com.cn/a1/CSS_HTML/9574.html

更多CSS/HTML

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

CSS/HTML

概述頁面中浮動(dòng)與清除浮動(dòng)

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀