16张台湾麻将写真馆
400-650-7353

精品課程

clear使用方法

  • 發布: Web前端培訓
  • 來源:Web前端干貨資料
  • 2019-12-19 16:20:46
  • 閱讀()
  • 分享
  • 手機端入口

浮動是我們前端布局的重要屬性,而浮動產生的高度塌陷問題也一直伴隨在我們布局過程中。眾所周知,clear:both是浮動產生高度塌陷的克星,但你真的認識clear嗎。

在技術文檔中對于clear的值是這樣解釋的:

我們在實例中看一下:

首先:在一個大盒子里放4個p標簽,讓p標簽全部左浮動,此時會產生高度塌陷問題

HTML代碼如下:

css代碼如下:

在前兩個p標簽之后添加一個空的塊元素div,給這個塊元素clear:left屬性

HTML代碼如下:

css代碼如下:

.clear{ clear: left; }

看起來是實現了元素左側不允許有浮動,但如果給第2個p標簽一個右浮動

css代碼如下:

p:nth-of-type(2){

float: right;

height: 100px;

background-color: orange;

}

會發現父元素只撐開了第一個左浮動的p標簽的寬度。

>>本文地址:
注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

申請免費試聽課程
課程干貨資料
 

相關推薦

從入門到進階
免費干貨資料

進群即領(備注:500G)
進群即領
(備注:500G)
 
 
16张台湾麻将写真馆 球探网篮球 吉祥棋牌游戏官方下载 短线股票推荐电话 电子游艺娱乐平台 qq分分彩 重庆时时彩与欢乐生肖 足球指数即时赔率 急速赛车手中车名 江西多乐彩11选5开奖结果 电竞比分网奇兵 球探网篮球 吉祥棋牌游戏官方下载 短线股票推荐电话 电子游艺娱乐平台 qq分分彩 重庆时时彩与欢乐生肖 足球指数即时赔率 急速赛车手中车名 江西多乐彩11选5开奖结果 电竞比分网奇兵