知識點四、元素邊框：border屬性。border-style 屬性用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。

<style>

div{width: 500px;height: 500px;border:1px solid red;}

/*

border-width:1px;邊框的粗細

border-style:solid;邊框的風格

border-color:red;邊框的顏色

=border:1px solid red;連寫方式：線條粗細 線條風格 線條顏色

*/

</style>

知識點五、元素浮動：float屬性。float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。

注意：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續(xù)到某一行擁有足夠的空間為止。

float屬性常用值：

float：left—元素向左浮動。

float：right—元素向右浮動。

float：none：默認值。元素不浮動，并會顯示在其在文本中出現的位置。

float：inherit：規(guī)定應該從父元素繼承 float 屬性的值。

知識點六、清除浮動：clear：both;清除浮動，是為了原浮動元素占有空間，有實際寬高。

浮動產生副作用1、背景不能顯示由于浮動產生，如果對父級設置了（CSS background背景）CSS背景顏色或CSS背景圖片，而父級不能被撐開，所以導致CSS背景不能顯示。2、邊框不能撐開如上圖中，如果父級設置了CSS邊框屬性（css border），由于子級里使用了float屬性，產生浮動，父級不能被撐開，導致邊框不能隨內容而被撐開。3、margin padding設置值不能正確顯示由于浮動導致父級子級之間設置了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。