怎么在CSS3中清除浮動-創(chuàng)新互聯(lián)

這篇文章給大家介紹怎么在CSS3中清除浮動，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)建站專注于雙臺子企業(yè)網(wǎng)站建設,響應式網(wǎng)站開發(fā),商城網(wǎng)站制作。雙臺子網(wǎng)站建設公司,為雙臺子等地區(qū)提供建站服務。全流程按需設計網(wǎng)站，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務

1、 浮動本來的意義

浮動的意義原本僅是用來讓文字環(huán)繞在圖片周圍而已。

通過上圖可以看到，設置圖片左浮動可以將圖片從正常文檔流中抽取出來，后面的元素會忽略浮動元素原來的位置，所以可以看到以塊元素顯示的span標簽插入到了圖片下面，但是，我們發(fā)現(xiàn)文字卻不會嵌入到圖片下面，因為這就是浮動最純粹的意義--讓文字環(huán)繞在圖片周圍（關(guān)于為什么文字不會插入浮動元素下面在網(wǎng)上也有一些討論，大家可以去搜索一下，本文在此就不做更詳細的解釋了）。

PS: 如果想讓文字也插入到浮動元素下面，可以通過設置絕對定位來實現(xiàn)。

// html代碼
  <section>
    <div class="origin1">
      ![img](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      <span>想象我是一大段文字</span>
    </div>
    <div class="float1">
      ![img](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      <span>想象我是一大段文字</span>      
    </div>
  </section>

// css代碼
.origin1 span {
  display: block;
  width: 250px;
  height: 120px;
  background-color: #78f182;  
}

.float1 img{
  float: left;
}

.float1 span {
  display: block;
  width: 250px;
  height: 120px;
  background-color: #78f182;
}

2、 浮動經(jīng)常被用來做什么

因為浮動可以讓塊狀元素并排顯示，所以經(jīng)常用來做導航欄，內(nèi)容分塊欄等布局。

// html代碼
  <section class="section2">
    <ul>
      <li><a href="#">產(chǎn)品中心</a></li>
      <li><a href="#">服務中心</a></li>
      <li><a href="#">新聞中心</a></li>
      <li><a href="#">客戶見證</a></li>
      <li><a href="#">招賢納士</a></li>
    </ul>
  </section>

// css代碼
.section2 li{
  list-style: none;
  float: left;
  padding: 20px;
  height: 20px;
  background-color: #1249c3;
  border-right: 1px solid #a0a2a2;
}

.section2 li a {
  color: #fff;
}

3、 為什么要清除浮動

通過上圖可以看到，當三個板塊左浮動以后，因為它們脫離了正常文檔流，所以它們的父元素ul在不設置高度的情況下，無法被子元素撐開(能夠看到背景色是因為我設置了ul的padding為10px)，所以當你在后邊新增元素的時候，自然會排在ul后邊，也就是插入到了3個浮動的板塊下面。
這并不是我們想要的，這就是要清除浮動的原因。

// html代碼
    <ul>
      <li><p>互動板塊 li</p></li>
      <li><p>學習板塊 li</p></li>
      <li><p>留言板塊 li</p></li>
      我是本應該包裹在3個板塊外面的父元素ul
    </ul>

    <div class="new">我是跟在ul后面的新div</div>

// css代碼
ul {
  padding: 20px;
  background-color: #b7db05;
}

ul li {
  width: 200px;
  height: 200px;
  background-color: #e3e3e3;
  margin-right: 20px;
  text-align: center;
  float: left;
}

.new {
  height: 50px;
  background-color: #1be751;
}

4、 如何清除浮動

(1) 在最后一個浮動的 li 元素后邊新增一個空的塊狀元素div，并設置clear:both以清除所有浮動。

// html代碼
    <ul>
      <li><p>互動板塊 li</p></li>
      <li><p>學習板塊 li</p></li>
      <li><p>留言板塊 li</p></li>
      我是本應該包裹在3個板塊外面的父元素ul
      <div style="clear:both;"></div>        // 新增代碼
    </ul>

    <div class="new">我是跟在ul后面的新div</div>

效果： ul后邊的div元素確實可以在浮動元素下邊排列，并且設置margin、padding等也是針對浮動元素的下邊框。

缺點： 多出了一個冗余標簽，并沒有任何結(jié)構(gòu)意義。

(2) 設置父元素ul的overflow: hidden或者overflow: auto。

// css代碼
ul {
  padding: 20px;
  background-color: #e7a5b8;
  overflow: hidden;
}

效果： 對于ul后面的元素來說，它們可以在浮動元素下邊依次排列了。
缺點： 采用這種overflow方法時可能會對采用定位position的元素產(chǎn)生影響，因為在ul的范圍內(nèi)，超出的部分將會被隱藏，所以如果定位元素處在ul超出的范圍內(nèi)，那么會被隱藏。

(3) 采用偽類方法，在最后一個浮動元素的后邊，添加clear:both。

// css代碼
ul:after {
  content: "";
  clear: both;
  display: block;
}

效果： 很好的清除了浮動帶來的影響，并且沒有附加作用，也沒有新增無語義的標簽。
缺點： 暫時還沒發(fā)現(xiàn)。

關(guān)于怎么在CSS3中清除浮動就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當前名稱：怎么在CSS3中清除浮動-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://muchs.cn/article26/dhiojg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站導航、App開發(fā)、營銷型網(wǎng)站建設、網(wǎng)站策劃、自適應網(wǎng)站

廣告

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