真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

// html代碼
  

    
      ![img](/upload/otherpic70/2944582-8c9f0eba7dce2e55.jpg%7CimageView2/2/w/1240)
      想象我是一大段文字
    

// 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;
}

// html代碼
  
    

      
產(chǎn)品中心
      
服務(wù)中心
      
新聞中心
      
客戶見證
      
招賢納士
    
  

// 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;
}

// html代碼
    

      
互動板塊 li
      
學(xué)習(xí)板塊 li
      
留言板塊 li
      我是本應(yīng)該包裹在3個板塊外面的父元素ul
    

    我是跟在ul后面的新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，并設(shè)置clear:both以清除所有浮動。

// html代碼
    

      
互動板塊 li
      
學(xué)習(xí)板塊 li
      
留言板塊 li
      我是本應(yīng)該包裹在3個板塊外面的父元素ul
              // 新增代碼
    

    我是跟在ul后面的新div

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

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

(2) 設(shè)置父元素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;
}

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

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