本節簡介:講解浮動屬性及清除浮動的應用,利用所學知識手動編寫代碼,制作導航條案例
本節課同學們做的筆記 點擊播放按鈕可自動定位到對應時間進行播放
float:left (right) 浮動,原有位置不在 清除浮動 clear:left:(身上不允許有左浮動的覆蓋)right both
如果父級元素沒有添加高度屬性,子集元素的高度和就是父級元素的高度,但是一旦為子集元素添加了浮動屬性之后,子集元素的高度就不能再撐開父級了;可以用clear 屬性清除浮動樣式后,讓父集高度等于子集高度之和。
當父集沒有定義高度,而子集都設置了浮動樣式之后,可以用clear 屬性清除浮動樣式后,讓父集高度等于子集高度之和
如果父級元素沒有添加高度屬性,子集元素的高度和就是父級元素的高度,但是一旦為子集元素添加了浮動屬性之后,子集元素的高度就不能再撐開父級了
clear清除浮動樣式 clear:left(清除左浮動)right(清除右浮動)both(清除左右浮動)
1、清除浮動 clear(left,right,both)
如果父級元素沒有添加高度屬性,子集元素的高度和就是父級元素的高度,但是一旦為子集元素添加了浮動屬性之后,子集元素的高度就不能再撐開父級了。
父級區塊的寬度設為固定值時,若子級區塊的寬度之和大于父級寬度且子級區塊都設為左浮動時,子級區塊會自動換到下一行
當父集沒有定義高度,而子集都設置了浮動樣式之后,可以用clear 屬性清除浮動樣式后,讓父集高度等于子集高度之和
clear值作用是使當前元素忽略其上方元素的浮動屬性
如果父級元素沒有添加高度屬性,子集元素的高度和就是父級元素的高度,但是一旦為子元素添加了float屬性之后,子元素的高度就不能再撐開父級
clear:清除浮動,clear:both;both屬性清除左右覆蓋的浮動
text-aligin:center; line-height:40px; 水平居中,垂直居中
如果父級元素沒有添加高度,子元素的高度就是父元素的高度