主頁(yè) > 知識(shí)庫(kù) > 概述頁(yè)面中浮動(dòng)與清除浮動(dòng)

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

熱門標(biāo)簽:商丘電話自動(dòng)外呼系統(tǒng)怎么收費(fèi) 周口導(dǎo)航地圖標(biāo)注 朝陽(yáng)自動(dòng)外呼系統(tǒng) 東莞人工外呼系統(tǒng)多少錢 400電話辦理尚景 默納克系統(tǒng)外呼顯示inns 地圖標(biāo)注地點(diǎn)下載 400電話是在哪里申請(qǐng) 昌邑外呼系統(tǒng)

一、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í)也希望多多支持腳本之家!

標(biāo)簽:揭陽(yáng) 銅陵 那曲 湖南 阿拉善盟 沈陽(yáng) 福建 健身房

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《概述頁(yè)面中浮動(dòng)與清除浮動(dòng)》,本文關(guān)鍵詞  概述,頁(yè)面,中,浮動(dòng),與,清除,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《概述頁(yè)面中浮動(dòng)與清除浮動(dòng)》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于概述頁(yè)面中浮動(dòng)與清除浮動(dòng)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章