99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

Css中如何清除浮動？

發(fā)布時(shí)間：2017-05-14 16:57  回復(fù):0  查看:2099   最后回復(fù)：2017-05-14 16:57  
   本文和大家分享的主要是css 中浮動清除相關(guān)內(nèi)容，一起來看看吧，希望對大家 學(xué)習(xí)css http://www.maiziedu.com/course/web/有所幫助。
　　當(dāng)容器的高度為auto ，且容器的內(nèi)容中有浮動（ float 為 left 或 right ）的元素，在這種情況下，容器的高度不能自動伸長以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。這個(gè)現(xiàn)象叫浮動溢出，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的 CSS 處理，就叫 CSS 清除浮動。
#div {
      background-color: blueviolet;
}      
#div p {
    width: 100px;
    height: 100px;
    background-color: red;
    float: right;
}
<div id="div">
    <p>float: right;</p>
</div> 　　
Css中如何清除浮動？
     清除浮動方法:
　　方法一：使用帶clear 屬性的空元素或者給浮動元素后面的元素添加 clear 屬性。
　　 在浮動元素后使用一個(gè)空元素如<div class="clear"></div> ，并在 CSS 中賦予 .clear{clear:both;} 屬性即可清理浮動。亦可使用 <br class="clear" /> 或 <hr class="clear" /> 來進(jìn)行清理。
#div {
  background-color: blueviolet;
}
#div p {
    width: 100px;
    height: 100px;
    background-color: red;
      float: right;
}
.clear{
    clear: both;
}
<div id="div">
    <p>float: right;</p>
    <div class="clear"></div>
</div> 　　
Css中如何清除浮動？
　　優(yōu)點(diǎn)：簡單，代碼少，瀏覽器兼容性好。
　　缺點(diǎn)：需要添加大量無語義的html 元素，代碼不夠優(yōu)雅，后期不容易維護(hù)。
　　方法二：使用CSS 的 overflow 屬性
　　給浮動元素的容器添加overflow:hidden; 或 overflow:auto; 可以清除浮動，另外在  IE6  中還需要觸發(fā)  hasLayout  ，例如為父元素設(shè)置容器寬高或設(shè)置  zoom:1 。
在添加overflow 屬性后，浮動元素又回到了容器層，把容器高度撐起，達(dá)到了清理浮動的效果。
#div {
  background-color: blueviolet;
   overflow: hidden;
}
#div p {
    width: 100px;
    height: 100px;
    background-color: red;
      float: right;
}
<div id="div">
    <p>float: right;</p>
</div>
Css中如何清除浮動？
方法三：給浮動的元素的容器添加浮動
　　給浮動元素的容器也添加上浮動屬性即可清除內(nèi)部浮動，但是這樣會使其整體浮動，  影響布局，不推薦使用。
#div {
      background-color: blueviolet;
      float: right;
}
#div p {
    width: 100px;
    height: 100px;
    background-color: red;
      float: right;
}
<div id="div" class="clearfix">
    <p>float: right;</p>
</div> 　　
Css中如何清除浮動？
方法四：使用CSS 的 :after 偽元素
　　結(jié)合 :after  偽元素（注意這不是偽類，而是偽元素，代表一個(gè)元素之后最近的元素）和  IEhack  ，可以完美兼容當(dāng)前主流的各大瀏覽器，這里的  IEhack  指的是觸發(fā)  hasLayout 。
給浮動元素的容器添加一個(gè)clearfix 的 class ，然后給這個(gè) class 添加一個(gè) :after 偽元素實(shí)現(xiàn)元素末尾添加一個(gè)看不見的塊元素（ Block element ）清理浮動。
#div {
      background-color: blueviolet;
}
#div p {
    width: 100px;
    height: 100px;
    background-color: red;
      float: right;
}
.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;  
   　zoom: 1;/*  觸發(fā)  hasLayout */
}
<div id="div" class="clearfix">
　　<p>float: right;</p>
</div>
Css中如何清除浮動？
　　通過CSS 偽元素在容器的內(nèi)部元素最后添加了一個(gè)看不見的空格 "020" 或點(diǎn) "." ，并且賦予 clear 屬性來清除浮動。需要注意的是為了 IE6 和 IE7 瀏覽器，要給 clearfix 這個(gè) class 添加一條 zoom:1; 觸發(fā) haslayout 。
　　方法五：給浮動的元素的容器添加display
　　這種方法可能你見得比較少，但給浮動元素的容器也添加上display:inline-block 確確實(shí)實(shí)可以解決這個(gè)清除浮動的問題。
　　浮動元素的容器里沒有添加  width：100%;  那么  添加了display:inline-block  浮動元素的容器是緊緊的包裹著子元素的，而不是像塊級元素那么完為 100% ，所以這里你可以根據(jù)自己的實(shí)踐需求進(jìn)行設(shè)置。
#div {
      background-color: blueviolet;
      display: inline-block;
      width: 100%;
}
#div p {
    width: 100px;
    height: 100px;
    background-color: red;
      float: right;
}
<div id="div" class="clearfix">
    <p>float: right;</p>
</div> 　　
　　無width ： 100%:  添加 width ： 100%:
Css中如何清除浮動？
來源： 博客園

您還未登錄，請先登錄

熱門帖子

最新帖子

?