浮動
float
屬性有float：left right
clear
清理浮動
clear：both
作用物件兩側不允許有浮動元素，如果有元素，物件就會自己換行；
clear：left
作用物件左側不允許有浮動元素，如果有元素，物件就會自己換行；
clear：right
作用物件右側不允許有浮動元素，如果有元素，物件就會自己換行；
當父級元素沒有高度的時候，子級元素都是浮動元素，會造成父級元素塌陷。
解決方法4種
1.增加父級元素的高度
#father
（簡單 但是如果子元素的高度改變，會受到限制）
2.該**後面增加空div，清理浮動
<div
class
="clear"
>
div>
.clear
(簡單 但是在**中加入空**不好）
3.overflow，隱藏浮動
overflow的屬性有 scroll滾動條和hidden隱藏 還有其他
#father
（如果元素存在position，會收到影響）
4.父級偽類，空內容 空塊 清理浮動
#father：：after
(複雜 推薦使用)
文字溢位的方法
1.單行文字（省略號）
不換行隱藏溢位部分
溢位部分省略號代替
#p
2.多行文字（截斷）
計算容器高度和文字的單行高度，計算容器可以容納多少行
溢位部分隱藏
div
(假設容器高度為60px，單行20px，有3行)
和文字的替換
1.把文字移出容器
不換行隱藏溢位部分
p
2.padding-top 高度為0
div
（高度為40px，）
背景
background-img
路徑
background-position
的位置，(left top)(center center)
background-size
大小（寬 高）（200px 40px）
background-repeat:no-repeat
的平鋪 （不平鋪）
解決浮動元素父級塌陷問題
坍塌原因 當父級元素沒有設定高度時，當子元素浮動後，子元素會脫離文件流，而父級元素的高度不會像在普通文件流中一樣被內容撐開，此時，它是不能被撐開的，會對後續的布局結構造成很多困擾。解決方法 clear both div clear取值 left 清除左浮動 right 清除右浮動 both 清除所有...
CSS學習總結 浮動 定位 父容器塌陷問題
怎麼說呢，從接觸前端起，到現在已經有三個月了，這麼長時間的學習呢，我的水平依然一般，前幾天參加了ife2017，下面總結一下對css中浮動 定位 分列布局 父容器塌陷問題的一些心得。首先，浮動和定位是css中布局的基礎，通過浮動和定位，可以實現對每乙個盒模型精確到畫素級別的控制，可見其重要性。先談談...
CSS學習總結 浮動 定位 父容器塌陷問題
怎麼說呢，從接觸前端起，到現在已經有三個月了，這麼長時間的學習呢，我的水平依然一般，前幾天參加了ife2017，下面總結一下對css中浮動 定位 分列布局 父容器塌陷問題的一些心得。首先，浮動和定位是css中布局的基礎，通過浮動和定位，可以實現對每乙個盒模型精確到畫素級別的控制，可見其重要性。先談談...