css中浮動(dòng)的使用方法

小編給大家分享一下css中浮動(dòng)的使用方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供海勃灣網(wǎng)站建設(shè)、海勃灣做網(wǎng)站、海勃灣網(wǎng)站設(shè)計(jì)、海勃灣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、海勃灣企業(yè)網(wǎng)站模板建站服務(wù)，10余年海勃灣做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

浮動(dòng)是CSS中一個(gè)相對(duì)比較麻煩的屬性，與之伴隨的通常是清除浮動(dòng)。今天我們一起來(lái)搞定浮動(dòng)。

常見(jiàn)的用法

事實(shí)上，當(dāng)我們將一個(gè)元素設(shè)置成浮動(dòng)時(shí)，達(dá)到的效果如下圖：

這種版式相信大家都見(jiàn)過(guò)，很多雜志都會(huì)采用這種左邊或者右邊插圖，文字環(huán)繞的效果。

另一種常見(jiàn)的浮動(dòng)的用法如下圖：

即在某一行內(nèi)，使某一部分右對(duì)齊，通常不會(huì)用margin實(shí)現(xiàn)，而是使用浮動(dòng)。

浮動(dòng)帶來(lái)的問(wèn)題

浮動(dòng)的元素?zé)o法撐開(kāi)父元素，即導(dǎo)致高度坍塌??！

來(lái)看下面的例子：

<div class="container">
  <div class="son1"></div>
  <div class="son2"></div>
</div>

.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}

當(dāng)較大的方塊浮動(dòng)時(shí)，我們可以看到他無(wú)法撐開(kāi)父元素。通常情況下這不是我們想要的結(jié)果，因?yàn)檫@會(huì)導(dǎo)致布局混亂。當(dāng)父元素內(nèi)的子元素全部浮動(dòng)時(shí)尤其明顯，父元素的高度會(huì)坍塌為0。

清除浮動(dòng)

因此，當(dāng)我們用到了浮動(dòng)，又不想出現(xiàn)這種情況的時(shí)候，就需要清除浮動(dòng)。

清除浮動(dòng)的方式可能有很多種，但是現(xiàn)在比較流行，我個(gè)人比較喜歡的方式如下：

首先，添加以下CSS：

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

然后，在父容器上添加clearfix類，最后代碼如下：

<div class="container clearfix">
  <div class="son1"></div>
  <div class="son2"></div>
</div>

.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}
.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

得到的效果如下：

浮動(dòng)的元素就可以撐開(kāi)父容器的高度啦！

看完了這篇文章，相信你對(duì)css中浮動(dòng)的使用方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱：css中浮動(dòng)的使用方法
文章地址：http://www.muchs.cn/article14/gcejde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、品牌網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、網(wǎng)站策劃、全網(wǎng)營(yíng)銷推廣、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)