成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

簡述清除浮動

FuisonDesign / 513人閱讀

摘要：為什么要清除浮動影響其他元素定位父盒子高度為，子盒子全部浮動定位，子盒子不會撐開父盒子，下面的元素會到子盒子的下面。清除浮動方法總結(jié)對父級元素設(shè)置高度對父級設(shè)置適合高度樣式清除浮動，一般設(shè)置高度需要能確定內(nèi)容高度才能設(shè)置高度設(shè)置為內(nèi)容高度。

為什么要清除浮動？

1、影響其他元素定位
父盒子高度為0，子盒子全部浮動、定位，子盒子不會撐開父盒子，下面的元素會到子盒子的下面。

2.背景圖片或顏色不能正常顯示
由于浮動產(chǎn)生，如果對父級設(shè)置了CSS背景顏色或CSS背景圖片，而父級不能被撐開，所以導(dǎo)致CSS背景不能顯示。

3、外邊距內(nèi)邊距設(shè)置影響
由于浮動導(dǎo)致父級子級之間設(shè)置了css padding、css margin屬性的值不能正確表達(dá)。特別是上下邊的padding和margin不能正確顯示。

清除浮動方法總結(jié)：

1、對父級元素設(shè)置高度
對父級設(shè)置適合高度樣式清除浮動，一般設(shè)置高度需要能確定內(nèi)容高度才能設(shè)置（高度設(shè)置為：內(nèi)容高度+padding+border）。

2、clear:both清除浮動
我們在父級“

”結(jié)束前加div引入“class="clear"”樣式,這樣就可以清除浮動了。

//html部分

 
  
left（向左浮動）
 
  
right(向右浮動）
 
  
 

 
//css部分
.divfloat {
  width:400px;
  border:1px solid #F00;
  background:#FF0;
} 
.divfloat-left,.divfloat-right {
  width:180px;
  height:100px; 
  border:1px solid #00F;background:#FFF;
} 
.divfloat-left {
  float:left;
} 
.divfloat-right {
  float:right;
} 
.clear {
  clear:both;
}

3、overflow:hidden清除浮動
對父級CSS選擇器加overflow:hidden樣式，可以清除使用的float產(chǎn)生浮動?！綛FC有三大特性:(1)BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊.(2)BFC不會重疊浮動元素.(3)BFC可以包含浮動.我們可以利用BFC的第三條特性來“清浮動”，這里其實說清浮動已經(jīng)不再合適了，應(yīng)該說用BFC來包含浮動。（還想深入了解BFC的可以參看“https://www.w3.org/TR/CSS21/v...”的詳細(xì)描述）】

//html部分

 
  
left（向左浮動）
 
  
right(向右浮動）
 
  
 

 
//css部分
.divfloat {
  width:400px;
  border:1px solid #F00;
  background:#FF0;
  overflow:hidden;
} 
.divfloat-left,.divfloat-right {
  width:180px;
  height:100px;
  border:1px solid #00F;
  background:#FFF;
} 
.divfloat-left {
  float:left;
} 
.divfloat-right { 
  float:right;
}

4、單偽元素//雙偽元素清除浮動
單偽元素清除浮動原理： 通過:after 偽類在浮動塊后面加上一個 display:none 的不可見塊狀內(nèi)容來，并給它設(shè)置 clear:both 來清理浮動。

.clearfix:after {
  content:" ";  /*必須為空*/
  visibility:hidden;
  display:block;
  height:0
  font-size:0;
  clear:both;
}

.clearfix {
  zoom:1;        /*兼容IE瀏覽器*/  
}

雙偽元素清除浮動原理：通過:after 偽類在浮動塊后面加上一個 display:table 的不可見塊狀內(nèi)容來，并給它設(shè)置 clear:both 來清理浮動。（注意：這里隱藏這個空白使用的是 display: table，而不是設(shè)置 visibility:hidden;height:0;font-size:0;與單偽元素清除浮動有所區(qū)別）

.cearfix:before, .cearfix:after {
   content:" ";    /*必須為空*/
   display:table;
}
.cearfix:after {
  clear:both;
}
.cearfix {
  zoom:1;     /*兼容IE瀏覽器*/
}
總結(jié)：

第一種方法：簡單，容易掌握，但只適合高度固定的布局，不推薦使用可以了解。
第二種方法：簡單，瀏覽器支持好，但如果頁面浮動布局多，就要增加很多空div，讓人感覺很麻煩，不推薦使用，可以了解。
第三種方法：代碼少，瀏覽器支持，不能和position配合使用，因為超出的尺寸的會被隱藏，只推薦沒有使用position的布局使用。
第四種方法：瀏覽器支持好,建議使用。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111997.html

相關(guān)文章

  • 前端面試題總結(jié)——HTML(持續(xù)更新中)

    摘要：等知名網(wǎng)站已經(jīng)開始測試并使用格式。頁面加載速度更快結(jié)構(gòu)化清晰頁面顯示簡潔。表現(xiàn)與結(jié)構(gòu)相分離。易于優(yōu)化搜索引擎更友好，排名更容易靠前。用于替換當(dāng)前元素，用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。 前端面試題總結(jié)——HTML(持續(xù)更新中) 1.什么是HTML？ HTML：HyperText Markup Language超文本標(biāo)記語言 2.XHTML和HTML有什么區(qū)別 HTML是一種基本的W...

    afishhhhh 評論0 收藏0

  • 前端面試題總結(jié)——HTML(持續(xù)更新中)

    摘要：等知名網(wǎng)站已經(jīng)開始測試并使用格式。頁面加載速度更快結(jié)構(gòu)化清晰頁面顯示簡潔。表現(xiàn)與結(jié)構(gòu)相分離。易于優(yōu)化搜索引擎更友好，排名更容易靠前。用于替換當(dāng)前元素，用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。 前端面試題總結(jié)——HTML(持續(xù)更新中) 1.什么是HTML？ HTML：HyperText Markup Language超文本標(biāo)記語言 2.XHTML和HTML有什么區(qū)別 HTML是一種基本的W...

    binta 評論0 收藏0

  • html5與css3階段復(fù)習(xí)題

    摘要：將超出對象尺寸的內(nèi)容進(jìn)行裁剪，不會出現(xiàn)滾動條。過渡效果使用動畫使用需要觸發(fā)一個事件才會隨著時間改變其屬性在不需要觸發(fā)任何事件的情況下，也可以顯式的隨時間變化來改變元素屬性，達(dá)到一種動畫的效果動畫不需要事件觸發(fā)，過渡需要。 1.請列出核心選擇器、層次選擇器有哪些 (5) 核心選擇器：id選擇器、class選擇器、標(biāo)簽選擇器、逗號選擇器、普遍選擇器 層次選擇器：子代選擇器、后代選擇器、下...

    techstay 評論0 收藏0

  • css浮動、BFC、定位問題

    摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。產(chǎn)生折疊的必備條件必須是鄰接的而根據(jù)規(guī)范，兩個是鄰接的必須滿足以下條件必須是處于常規(guī)文檔流非和絕對定位的塊級盒子并且處于同一個當(dāng)中。 1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響? 何謂浮動元素？有什么特征？所謂浮動元素，即是設(shè)置了浮動屬性的元素。其特征為： 1.浮動的框可以向左或者向右移動，直到它的外...

    Tony 評論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    li21 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<