一、輪廓和圓角
box-shadow 用來設置元素的陰影效果，陰影不會影響頁面佈局
第一個值 水平偏移量 設置陰影的水平位置 正值向右移動 負值向左移動
第二個值 垂直偏移量 設置陰影的水平位置 正值向下移動 負值向上移動
第三個值 陰影的模糊半徑
第四個值 陰影的顏色
outline 用來設置元素的輪廓線，用法和border一模一樣
輪廓和邊框不同的點，就是輪廓不會影響到可見框的大小
/* border-radius: 用來設置圓角 圓角設置的圓的半徑大小*/
/* border-top-left-radius: */
/* border-top-right-radius */
/* border-bottom-left-radius: */
/* border-bottom-right-radius: */
/* border-top-left-radius:50px 100px; */
/*
border-radius 可以分別指定四個角的圓角
四個值 左上 右上 右下 左下
三個值 左上 右上/左下 右下
兩個個值 左上/右下 右上/左下
*/
/* border-radius: 20px / 40px; */
/* 將元素設置爲一個圓形 */
二、浮動的簡介
通過浮動可以使一個元素向其父元素的左側或右側移動
使用 float 屬性來設置於元素的浮動
可選值：
none 默認值 ，元素不浮動
left 元素向左浮動
right 元素向右浮動
注意，元素設置浮動以後，水平佈局的等式便不需要強制成立
元素設置浮動以後，會完全從文檔流中脫離，不再佔用文檔流的位置，
所以元素下邊的還在文檔流中的元素會自動向上移動
浮動的特點：
1、浮動元素會完全脫離文檔流，不再佔據文檔流中的位置
2、設置浮動以後元素會向父元素的左側或右側移動，
3、浮動元素默認不會從父元素中移出
4、浮動元素向左或向右移動時，不會超過它前邊的其他浮動元素
5、如果浮動元素的上邊是一個沒有浮動的塊元素，則浮動元素無法上移
6、浮動元素不會超過它上邊的浮動的兄弟元素，最多最多就是和它一樣高
簡單總結：
浮動目前來講它的主要作用就是讓頁面中的元素可以水平排列，
通過浮動可以製作一些水平方向的佈局
浮動元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，
所以我們可以利用浮動來設置文字環繞圖片的效果
元素設置浮動以後，將會從文檔流中脫離，從文檔流中脫離後，元素的一些特點也會發生變化
脫離文檔流的特點：
塊元素：
1、塊元素不在獨佔頁面的一行
2、脫離文檔流以後，塊元素的寬度和高度默認都被內容撐開
行內元素：
行內元素脫離文檔流以後會變成塊元素，特點和塊元素一樣
脫離文檔流以後，不需要再區分塊和行內了
三、BFC
BFC(Block Formatting Context) 塊級格式化環境
- BFC是一個CSS中的一個隱含的屬性，可以爲一個元素開啓BFC
開啓BFC該元素會變成一個獨立的佈局區域
- 元素開啓BFC後的特點：
1.開啓BFC的元素不會被浮動元素所覆蓋
2.開啓BFC的元素子元素和父元素外邊距不會重疊
3.開啓BFC的元素可以包含浮動的子元素
- 可以通過一些特殊方式來開啓元素的BFC：
1、設置元素的浮動（不推薦）
2、將元素設置爲行內塊元素（不推薦）
3、將元素的overflow設置爲一個非visible的值
- 常用的方式 爲元素設置 overflow:hidden 開啓其BFC 以使其可以包含浮動元素
高度塌陷的問題：
在浮動佈局中，父元素的高度默認是被子元素撐開的，
當子元素浮動後，其會完全脫離文檔流，子元素從文檔流中脫離
將會無法撐起父元素的高度，導致父元素的高度丟失
父元素高度丟失以後，其下的元素會自動上移，導致頁面的佈局混亂
所以高度塌陷是浮動佈局中比較常見的一個問題，這個問題我們必須要進行處理！
解決方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
border: 10px red solid;
/* overflow: hidden; */
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.box3{
clear: both;
}
.box1::after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!-- <div class="box3"></div> -->
</div>
</body>
</html>