浮動

float

屬性有float：left right

clear

清理浮動

clear：both

作用物件兩側不允許有浮動元素，如果有元素，物件就會自己換行；

clear：left

作用物件左側不允許有浮動元素，如果有元素，物件就會自己換行；

clear：right

作用物件右側不允許有浮動元素，如果有元素，物件就會自己換行；

當父級元素沒有高度的時候，子級元素都是浮動元素，會造成父級元素塌陷。

解決方法4種

1.增加父級元素的高度

#father{

    height：300；

}

（簡單 但是如果子元素的高度改變，會受到限制）

2.該程式碼後面增加空div，清理浮動

<div class="clear"></div>

.clear{
    clear：both;
    }

(簡單 但是在程式碼中加入空程式碼不好）

3.overflow，隱藏浮動

overflow的屬性有scroll滾動條和hidden隱藏 還有其他

#father{
  overflow：hidden ；
}

（如果元素存在position，會收到影響）

4.父級偽類，空內容 空塊 清理浮動

#father：：after{
  content:"";
  display:block;  
  clear:both;  
}

(複雜 推薦使用)

文字溢位的方法

1.單行文字（省略號）

不換行

隱藏溢位部分

溢位部分省略號代替

#p{
  white-space：nowrap;
  overflow:hidden;
  text-overflow:ellipsis;    

}

2.多行文字（截斷）

計算容器高度和文字的單行高度，計算容器可以容納多少行

溢位部分隱藏

div{
  line-height: 20 px ;
  overflow:hidden;
}

(假設容器高度為60px，單行20px，有3行)

圖片和文字的替換

1.把文字移出容器

不換行

隱藏溢位部分

p{
    text-indent：200px；
    white-space：nowrap；
    overflow：hidden；
　　background-img：url（hone.jpg）

 
}

2.padding-top 高度為0

div{
    width:200px;
    height:0;
    padding-top:40px;
    overflow:hidden;
　　

    background-img：url（hone.jpg）

}

（圖片高度為40px，）

背景圖片

background-img

圖片路徑

background-position

圖片的位置，(left top)(center center)

background-size

圖片大小（寬 高）（200px 40px）

background-repeat:no-repeat

圖片的平鋪 （不平鋪）